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

简介: 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的产生。

目录
相关文章
|
算法 前端开发 JavaScript
JS - 前端生成 UUID 四种方法
JS - 前端生成 UUID 四种方法
6360 0
|
12月前
|
前端开发
|
前端开发
antd_使用Input封装实现Form校验效果
本文介绍了如何在Ant Design (antd) 中使用 Input 组件封装实现表单校验效果,包括必填、数字、IP、邮箱、手机号、身份证号和域名等校验规则的使用,以及如何通过回调函数进行校验。
407 4
|
8月前
|
移动开发 前端开发 API
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `&lt;audio&gt;` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
608 123
|
8月前
|
SQL JSON 数据可视化
基于 DIFY 的自动化数据分析实战
本文介绍如何使用DIFY搭建数据分析自动化流程,实现从输入需求到查询数据库、LLM分析再到可视化输出的全流程。基于经典的employees数据集和DIFY云端环境,通过LLM-SQL解析、SQL执行、LLM数据分析及ECharts可视化等模块,高效完成数据分析任务。此方案适用于人力资源分析、薪酬管理等数据密集型业务,显著提升效率并降低成本。
12336 16
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
298 0
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
517 1
|
JavaScript API 数据格式
【Vue 3】如何封装一个超级好用的 Hook!
【Vue 3】如何封装一个超级好用的 Hook!
|
11月前
|
缓存 安全 程序员
易语言在跨平台开发中有哪些常见的技术挑战和解决方案
易语言在跨平台开发中有哪些常见的技术挑战和解决方案
236 1
|
资源调度 前端开发 JavaScript
ACEeditor使用手册(一)
ACEeditor使用手册(一)
841 1