react antd实现一个树级的可编辑表格，并且可以合并表头

2024-04-13 11:12| 来源: 网络整理| 查看: 265

简述

最近公司有个新需求，需要做一个树级的可编辑表格，并且可以合并表头。我尼玛，这么复杂的可编辑表格杂整啊。大概就是下面图类似的，第一行是树级结构，后面都是可以编辑的

实现

选择的技术方案：在antd的基础上封装（因为antd 的Table组件支持树级显示，也支持合并表头，）

1、antd Table的前置知识

Table的dataSource属性会把里面有嵌套的数据拍平

const data = [ { name:"父级", children:[ {name:"子级1"}, {name:"子级2"}, ] } ] antd里面最后使用会变成 const flattenData = [ {name:"父级"}, {name:"子级1"}, {name:"子级2"}, ]

Table源码

Table的columns属性会把里面有嵌套的数据弄成二维数组

const columns=[ { title: '建设任务', dataIndex: 'name', }, { title: '到位金额', children:[ { title: '合计q填报', dataIndex: 'total1', width: 220, }, { title: '合计w填报', dataIndex: 'total2', width: 220, }, ] },] const resultColumns = [ [ { title: '建设任务', dataIndex: 'name', }, { title: '到位金额', } ],[ { title: '合计q填报', dataIndex: 'total1', width: 220, }, { title: '合计w填报', dataIndex: 'total2', width: 220, }, ]

Table处理columns源码

2、最简单的实现 const columns=[ { title: '建设任务', dataIndex: 'name', }, { title: '到位金额', children:[ { title: '合计q填报', dataIndex: 'total1', width: 220, render: (value) => }, { title: '合计w填报', dataIndex: 'total2', width: 220, render: (value) => }, ] },]

这样好像行了，自己render,前面是树级，后面都是可以编辑的。但是这样每次都需要我们自己render,达不到封装的目的。好了，接下来我发现antd 的table 有一个components属性，我们可以自定每一行，每一列。

Table处理TableComponents源码

3、使用components自定义实现表格的行和列 const tdNewComponent = ( props ) => { if (props?.column?.dataIndex === 'name') { return } return }

这样使用自定单元格确实一次就解决了每次render的问题

【本文地址】

公司简介

联系我们