前端开发必备技能知识笔记-Ant design for Vue的table的行合并的代码实现

Ant design for vue（后面简称antd）的表格是支持行/列合并，列合并比较简单好弄，直接看官网例子就能搞定，行合并官网例子也有，但是实际运用中还是要根据实际情况改造。下面我就记录一下根据项目需求参考官方例子写的实现行合并的代码，为了后面自己查看方便做这个笔记

实现原理

这个是官网中实现行合并的主要代码块

代码段主要实现原理就是将需要合并的那几行中的其中一行设置rowSpan为要合并的行数量，剩余的需要合并的那几行的rowSpan设置为0（这里必须设置成0，不然表格会变形错位）

步骤

1、数据分组，可以前端进行数据格式化将数据分组，如果后端已经分组那是最好的（行合并主要就是为了直观的展示分组后的数据）

2、在table的columns中设置行合并（我使用typescript，所以不用computed要这样用get写计算器，这里为什么要用计算器后面会解释）

//获去columns
get getColumns() {
    const jcxm_childrenColumns = (this.checkedNodes || []).map(({
                                                                  key,
                                                                  title,
                                                                }) => ({
      title,
      dataIndex: key,
      key,
      width: 100,
    }));
    if (jcxm_childrenColumns.length > 0) {
      return [{
        title: '区域',
        dataIndex: 'xzqmc',
        key: 'xzqmc',
        width: 100,
        fixed: 'left',
        customRender: (value, row, index) => {
          const { xzq } = row;
          // 满足要求需要合并的行中的第一行
          const temp_Index = this.dataSource.findIndex((record) => record.xzq === xzq);
          // 需要合并的行数
          const rowSpan = this.dataSource.filter((record) => record.xzq === xzq).length;
          if (rowSpan > 1) {
            // 要合并的行中的第一个（从这一行合并）
            if (temp_Index === index) {
              return {
                children: value,
                attrs: { rowSpan },
              };
            }
            // 其他要合并的行都设rowSpan=0
            return {
              children: value,
              attrs: { rowSpan: 0 },
            };
          }

          return value;
        },
      }, {
        title: '采样类型',
        dataIndex: 'cylxmc',
        key: 'cylxmc',
        width: 120,
        ellipsis: true,
        fixed: 'left',
      }, {
        title: '检测项目',
        children: jcxm_childrenColumns || [],
      }, {
        title: '综合',
        dataIndex: 'zh',
        key: 'zh',
        width: 100,
        fixed: 'right',
      }];
    }
    return [];
  }

主要实现代码

{
        title: '区域',
        dataIndex: 'xzqmc',
        key: 'xzqmc',
        width: 100,
        fixed: 'left',
        customRender: (value, row, index) => {
          const { xzq } = row;
          // 满足要求需要合并的行中的第一行
          const temp_Index = this.dataSource.findIndex((record) => record.xzq === xzq);
          // 需要合并的行数
          const rowSpan = this.dataSource.filter((record) => record.xzq === xzq).length;
          if (rowSpan > 1) {
            // 要合并的行中的第一个（从这一行合并）
            if (temp_Index === index) {
              return {
                children: value,
                attrs: { rowSpan },
              };
            }
            // 其他要合并的行都设rowSpan=0
            return {
              children: value,
              attrs: { rowSpan: 0 },
            };
          }

          return value;
        },
      }

注意：由于我的行合并实现代码中使用到了表的dataSource数据所以要在计算器computed中实现，不然达不到合并效果，因为初始化的时候dataSource没有数据，所以当dataSource被填充数据后要重新获取table的columns

效果

---

实现不是很难，只是做为一个笔记，方便后面查看