Antd中Table列表行默认包含修改及删除功能的封装方法

 更新时间:2022年12月22日 11:53:29   作者:曲鸟  
这篇文章主要介绍了Antd中Table列表行默认包含修改及删除功能的封装,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、前言

ant-design是非常不错、方便的一款前端组件库,而这次用到的ProComponents则是在 Ant Design 上进行了自己的封装,更加易用,与 Ant Design 设计体系一脉相承,无缝对接 antd 项目,样式风格与 antd 一脉相承,无需魔改,浑然天成。一些预设行为也达到了更少的代码,更少的 Bug的目的。

这里我使用ProComponents的editable-table时发现它的表格默认自带了修改删除功能:

在这里插入图片描述

代码封装的actionRender方法提供了相应的参数来使用默认的修改删除:

在这里插入图片描述

自己使用的项目也有非常多的表单,大部分都包含修改删除功能,所以对我来讲也是非常实用的,但它的修改是在行内编辑,我的需要弹窗编辑,所以这里根据自己的思路封装了一下,下面分享给大家。

二、给Table封装默认的修改、删除功能

整个封装过程把思路理清楚了也能很简单的实现,首先是将弹窗方法(不同功能的表单会有差异)传递给封装的公共Table:

  //弹窗方法
  const showModal = (type: string, values: any = {}) => {
    values['formType'] = type;
    setFormData(values);
    setFormVisible(true);
  };

传递给table:

     <LimTable
        actionRef={ref}
        columns={columns}
        func={UserView}
        showModal={showModal}
        headerTitle="用户列表"
      />

然后在公共Table组件中定义默认表单的操作方法(修改,删除)这里只提供思路,代码不适用于你的项目:

  //默认的表单操作dom
  const defaultColumnDom = {
    update: (record: any) => (
      <a key="update" onClick={() => showModal(PATCH, record)}>
        修改
      </a>
    ),
    delete: (record: any) => (
      <a
        key="delete"
        onClick={() => {
          deleteDataFunc(func, record.id);
        }}
      >
        删除
      </a>
    ),
  };

然后放入设置表单操作栏的方法中:

  //设置表单options(操作栏)的方法
  const setDefualtColumnsOptions = () => {
    for (let i = 0; i < columns.length; i++) {
      if (columns[i].dataIndex === 'option') {
        if (!optionRender) {
          //没有配置optionRender则默认增加修改、删除功能
          columns[i].render = (_: any, record: any) => [
            defaultColumnDom.update(record),
            defaultColumnDom.delete(record),
          ];
        } else {
          columns[i].render = (_: any, record: any) =>
            optionRender({ update: defaultColumnDom.update(record), delete: defaultColumnDom.delete(record) }, record);
        }
        break;
      }
    }
  };

最后加入useEffect中即可完成:

 useEffect(() => {
    setDefualtColumnsOptions();
  }, []);

三、实现效果

当我们不传递optionRender时,列表默认携带修改、和删除功能:

在这里插入图片描述

当我们传递了optionRender时,列表根据传递的渲染操作栏:

只包含修改功能

      <LimTable
        actionRef={ref}
        columns={columns}
        func={UserView}
        optionRender={(dom: any) => [dom.update]}
        showModal={showModal}
        headerTitle="用户列表"
      />

在这里插入图片描述

包含修改功能并附加文字:

      <LimTable
        actionRef={ref}
        columns={columns}
        func={UserView}
        optionRender={(dom: any) => [dom.update, '曲鸟']}
        showModal={showModal}
        headerTitle="用户列表"
      />

在这里插入图片描述

这样我们又封装好了一个组件了,减少了后面编码的重复性工作,也间接减少了BUG的产生。

到此这篇关于Antd中Table列表行默认包含修改及删除功能的封装的文章就介绍到这了,更多相关Antd中Table列表行封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现原型封装轮播图

    JavaScript实现原型封装轮播图

    这篇文章主要为大家详细介绍了JavaScript原型封装轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 简单实现js浮动框

    简单实现js浮动框

    这篇文章主要为大家详细介绍了如何简单实现js浮动框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 还不懂递归?读完这篇文章保证你会懂

    还不懂递归?读完这篇文章保证你会懂

    你还不懂递归?读完这篇文章保证你会懂,下面这篇文章主要给大家介绍了关于递归的相关内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • 在页面中引入js的两种方法(推荐)

    在页面中引入js的两种方法(推荐)

    下面小编就为大家带来一篇在页面中引入js的两种方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 用javascript添加控件自定义属性解析

    用javascript添加控件自定义属性解析

    这篇文章主要是对用javascript添加控件自定义属性进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 详解js如何优雅处理后端返回的单元格数据

    详解js如何优雅处理后端返回的单元格数据

    这篇文章主要为大家详细介绍了JavaScript如何优雅处理后端返回的单元格数据,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • 关于IE只能嵌套27层表格的说法证明

    关于IE只能嵌套27层表格的说法证明

    关于IE只能嵌套27层表格的说法证明...
    2006-11-11
  • Webpack完整打包流程深入分析

    Webpack完整打包流程深入分析

    webpack是一种前端资源构建工具,一个静态模块打包器(module bundler),下面这篇文章主要给大家介绍了关于Webpack完整打包流程的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JS自定义功能函数实现动态添加网址参数修改网址参数值

    JS自定义功能函数实现动态添加网址参数修改网址参数值

    本文自定义JS功能函数可动态添加网址参数,修改网址参数值,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • js中var、let、const之间的区别

    js中var、let、const之间的区别

    本文主要介绍了js中var、let、const之间的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

最新评论