antdesgin-vue表格合并单元格，且序号根据合并单元格排序

先贴效果图

主要使用官方api提供的配置项

 customRender: (value, row) => {
                  const obj = {
                   children: row.Nosort,
                    attrs: {},
                  };
                  obj.attrs.rowSpan = row.rowSpan;
                  return obj;
                },

这里的  rowSpan字段是自己根据表格数据判断添加跨行字段,Nosort字段是用来表格序号排序的，因为合并单元格，两个单元格之间肯定有相同字段或者关联性字段，我们首先对原来的表格数据数组进行处理，将需要合并的表格对象数据进行合并形成一个新的数组，例如：

  // 对象数组去重
  function uniqueObjArr(arr, fieldName) {
    const result = [];
    const resultArr = [];
    arr.forEach((child) => {
      if (result.indexOf(child[fieldName]) === -1) {
        result.push(child[fieldName]);
        resultArr.push(child);
      }
    });
    return resultArr;
  };
  // 去重并合并到children
  function sortData(dataArr) {
    const orgArrRe = dataArr.map(item => ({ ruleName: item.ruleName }));
    const orgArr = this.uniqueObjArr(orgArrRe, 'ruleName');// 数组去重
    orgArr.forEach((childOne) => { // 去重reportName合并到children，得到一共有几个不同的reportName要合并
      childOne.children = [];
      dataArr.forEach((childTwo) => {
        if (childOne.ruleName === childTwo.ruleName) { // childOne是去重的，childTwo是没去重的
          childOne.children.push(childTwo);
        }
      });
    });
    orgArr.forEach((every) => {
      every.span = every.children ? every.children.length : 0;
    });
    return orgArr;
  };
  var arrs = [
    {
      ruleName: '一类',
      name: '张三',
      age: 16,
    },
    {
      ruleName: '一类',
      name: '李四',
      age: 15,
    },
    {
      ruleName: '二类',
      name: '张三',
      age: 16,
    }
  ];
  var newarr = sortData(arrs);
  console.log(newarr)
    // {
  //   ruleName: "一类", children: [
  //     { ruleName: "一类", name: "张三", age: 16 },
  //     { ruleName: "一类", name: "李四", age: 15 }
  //   ], span: 2
  // },
  // {
  //   ruleName: "二类", children: [
  //     { ruleName: "二类", name: "张三", age: 16 }
  //   ], span: 1
  // }

将一类的数组对象（对象字段值相同的对象）进行合并，得到一个包含children的二维数组,最后当antdesign-table组件绑定table数据时，再次绑定一个函数makeData

  <a-table
              rowKey="kid"
              size="middle"
              :loading="loading"
              :columns="columns"
              :data-source="makeData(itemList)"
              :scroll="{ y: 240 }"
              :pagination="false"
            ></a-table>

js:

 // 遍历子元素，并赋值纵向合并数rowSpan
    makeData(data) {
      const sortResult =this.sortData(data);// 该sortData函数在上面
      const dataSource = [];
      var Nosort = 0;
      sortResult.forEach((item) => {
        if (item.children) {
          item.children.forEach((itemOne, indexOne) => {
            const myObj = itemOne;
            myObj.rowSpan = indexOne === 0 ? item.span : 0;
            myObj.Nosort = myObj.rowSpan === 0 ? Nosort : ++Nosort;
            dataSource.push(myObj);
          });
        }
      });
      return dataSource;
    },

这里最后说一下，开发时遇到的问题，本来一开始只声明了一个rowspan字段用来跨行是足够的，但是后续产品说序号才发现，跨行对序号排列不友好，所以多声明了一个Nosort字段，用来序号排列展示