ant-design-vue表格动态合并可编辑单元格的解决方法

ant-design-vue动态合并可编辑表格的解决方法

ant-design-vue官方提供了合并单元格的方式，使用customRender方法可以进行单元格合并：
其中rowSpan为合并行数，mergeRowspan为动态定义合并行数（下面介绍）。具体用法可参考ant-design-vue表格行/列合并

vm.columns = [
    {
        title: "列名", dataIndex: "aaa",
        customRender: (text, row, index) => {
            var obj = {
                children: text,
                attrs: {}
            }
            if (index % 2 == 0) {
                obj.attrs.rowSpan = 2;
            } else {
                obj.attrs.rowSpan = mergeRowSpan;
            }
            return obj;
        }
    },
];

动态定义表格的合并行数

如果需要动态定义表格的合并行数，可以通过定义一个rowSpan()函数，通过合并数据的特殊值如：id作为参数传入，可以根据表格数据动态获取可合并的行数，再将合并后的数据替换表格数据。

rowSpan(dataIndex) {
      //过滤合并后现实的表格内容
      let arr = this.tableList
        .reduce((result, item) => {
        //不存在则放入展示结果
          if (result.indexOf(item[dataIndex]) < 0) {
            result.push(item[dataIndex]);
          }
          return result;
        }, [])
        //确定每个合并的合并行数
        .reduce((result, keys) => {
        //计算出可以合并的数据
          const children = this.tableList.filter((item) => item[dataIndex] === keys);
          result = result.concat(
          //计算出合并行数
            children.map((item, index) => ({
              ...item,
              [`mergeRowSpan`]: index === 0 ? children.length : 0,
            }))
          );
          return result;
        }, []);
        //将最后展示的数据替换原数据
      this.tableList = arr;
    },

编辑表格单元格内容

如果需要编辑表格单元格内容的话，可以参考官方的ant-design-vue可编辑单元格。

通过分析ant-design-vue可编辑单元格和合并单元的实现方法，我们可以发现分别是使用scopedSlots和customRender来实现的，这两个实际上不不能共用的。

这就会出现一个问题：动态合并可编辑的单元格怎么实现呢？使用JSX。

动态合并可编辑单元格

通过JSX语法来解决scopedSlots和customRender冲突的问题，具体语法自行查阅官方文档。解决动态合并可编辑的单元格时查了很多网上的资料，但都只涉及简单的定义事件，不能满足自定义需求。

合并单元格的可编辑实现，可以在下列代码obj中children中添加自定义可编辑子组件editable-cell，其中有text为绑定数据，可以通过text={value}传入，vue的数据绑定语法在此报错，参考JXS语法。如果需要接受可编辑子组件传过来的值并触发函数，可以通过函数直接调用触发事件。网上涉及的几种方式在验证时只会在渲染时触发，不能在编辑时触发相应事件。

{
          title: '图片张数',
          dataIndex: 'photoCount',
          scopedSlots: { customRender: 'photoCount' },
          // 合并单元格
          customRender: (value, row, index) => {
            const obj = {
              // onCellChange为编辑时处罚的事件
              children: <editable-cell text={value} onChange={(val) => this.onCellChange(row.id,'photoCount',val)}></editable-cell>,
              
              attrs: {
                rowSpan: row.draftRowSpan, //合并单元格数（同上mergeRowSpan动态生成）
              },
            };
            obj.attrs.rowSpan = row.draftRowSpan
            return obj;
          },
        },