antd合并表格,并使用fixed布局

    const temp = {}; // 当前重复的值,支持多列
    const isAllEqual = array => {
      if (array.length > 0) {
        return !array.some((value, index) => value !== array[0]);
      }
      return true;
    };
    /**
     * 动态合并表格方法
     * @param {*} text 表格每列对应的值
     * @param {*} data 后台返回的展示数据数组, 数据需要按字段排序
     * @param {*} columns 表格每列表头字段
     */
    const mergeCells = (text, data, columns) => {
      let i = 0;
      if (text !== temp[columns]) {
        temp[columns] = text;
        data.forEach(item => {
          if (item[columns] === temp[columns]) {
            i += 1;
          }
        });
      }
      return i;
    };

    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: '120px',
        fixed: true,
        ellipsis: true,
        render: (text, row, index) => {
          const obj = {
            children: text,
            props: {},
          };
          // mergeCells这样合并时可以的，但是fixed布局下会有问题 所以判断显示
          // 数据只有一条的情况
          if (tableData.length === 1) {
            obj.props.rowSpan = 1;
          } else if (isAllEqual(tableData.map(el => el.id))) {
            obj.props.rowSpan = index === 0 ? tableData.length : 0;
          } else {
            obj.props.rowSpan = mergeCells(row.id, tableData, 'id');
          }
          return obj;
        },
      },
]

实现效果