Antd Vue中使用table组件把相同名称的合并单元格---只需两步

当前效果：

想要的效果：

第一步：在获取table数据的地方处理数据

function getTableList () {
  getDataList().then(res => {
    if (res.code == 200 && res.data) {
      const list = res.data
      let columnIndex = 0 //第一条数据
      let rowSpan = 1 //合并行数
      list.map((obj, i) => {
        // 合并单元格处理-start
        if (i < list.length - 1) {
          const nextI = i + 1 //下一条数据index
          // 注意：当前合并的是名称name列，请按需修改！！！！！
          if (list[columnIndex].name == list[nextI].name) { //判断当前和下一条名字是否一致
            rowSpan = rowSpan + 1
            if (columnIndex != i) {
              list[i].rowSpan = 0
              // 最后一个特殊处理
              if (!list[nextI + 1]) {
                list[list.length - 1].rowSpan = 0
                list[columnIndex].rowSpan = rowSpan + 1
              }
            } else {
              list[i].rowSpan = rowSpan
            }
          } else {
            list[i].rowSpan = 0 
            list[columnIndex].rowSpan = rowSpan //当节点合并行数
            columnIndex = columnIndex + rowSpan //下一个合并节点
            rowSpan = 1 //重置合并行数
            // 最后一个特殊处理
            if (list.length == list[nextI]) {
              list[list.length - 1].rowSpan = 1
            }
          }
        }
        // 合并单元格处理-end
      })
    }
  })
}

第二步：修改columns，合并哪一列就在哪一列下写customCell

const columns = ref([
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 180,
    customCell: (row, index) => {
      return {
        rowSpan: row.rowSpan
      }
    }
  },
  {
    title: '日期',
    dataIndex: 'dataTime',
    key: 'dataTime'
  },
  {
    title: '概述',
    dataIndex: 'overview',
    key: 'overview',
    ellipsis: true
  }
])