ant design vue 中的 Table 组件如何合并行

根据 Ant Design Vue - Table 表格，表格行/列合并。

表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

属性 customRender：生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并。

const temp = {}; // 当前重复的值,支持多列
const mergeCellKey = (text, array, columns) => {
  let i = 0;
  if (text !== temp[columns]) {
    temp[columns] = text;
    array.forEach((item) => {
      if (item.key === temp[columns]) {
        i += 1;
      }
    });
  }
  return i;
};
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  return obj;
};

如何使用呢？

computed: {
  columns () {
    return [{
      title: '序号',
      dataIndex: 'key',
      customRender: (value, row, index) => {
        const obj = {
          children: value,
          attrs: {},
        };
        obj.attrs.rowSpan = mergeCellKey(row.key, this.dataSource, 'key')
        return obj;
      },
    }, {
      title: '说明',
      dataIndex: 'settingOne',
      customRender: renderContent,
    }];
  }
},