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,
    }];
  }
},