antd-table 合并行

<template>
  <a-table
    :rowKey="(record, index) => index"
    :bordered="true"
    size="middle"
    :columns="columns"
    :pagination="false"
    :data-source="tableData"
    :scroll="{ x: 1500, y: 'calc(100vh - 650px)' }"
  >
    <!-- <template slot="useReason" slot-scope="text, record">
      {{ (dispatchReasonList[text] && dispatchReasonList[text].title) || '' }}
    </template> -->
  </a-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          zyProviderName: 'zyProviderName',
          zrProviderName: 3,
          contName: 'contName',
          useReason: 'useReason',
          profName: 'profName',
          daysNum: 64
        },
        {
          zyProviderName: 'zyProviderName',
          zrProviderName: 3,
          contName: 'contName',
          useReason: 'useReason',
          profName: 'profName',
          daysNum: 14
        },
        {
          zyProviderName: 'zyProviderName',
          zrProviderName: 3,
          contName: 'contName',
          useReason: 'useReason',
          profName: 'profName',
          daysNum: 24
        },
        {
          zyProviderName: 344,
          zrProviderName: 443,
          contName: 'contName1',
          useReason: 'useReason',
          profName: 'profName',
          daysNum: 44
        }
      ],
      columns: [
        {
          title: '第一列',
          dataIndex: 'zyProviderName',
          width: 150,
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex, 'zyProviderName')
          }
        },
        {
          title: '第2列',
          dataIndex: 'zrProviderName',
          width: 150,
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex, 'zrProviderName')
          }
        },
        {
          title: '第3列',
          dataIndex: 'contName',
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex, 'contName')
          }
        },
        {
          title: '第4列',
          dataIndex: 'useReason',
          width: 150,
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex, 'useReason')
          }
        },
        {
          title: '第5列',
          dataIndex: 'profName'
        },
        {
          title: '第6列',
          dataIndex: 'daysNum'
        }
      ]
    }
  },
  methods: {
    // 合并单元格
    mergeCellsSlot(record, rowIndex, key) {
      // 开始下标
      const index = this.tableData.findIndex(item => item[key] == record[key])
      // 需要合并的单元格数
      let rowSpanNum = 0
      this.tableData.forEach(item => {
        if (item[key] == record[key]) {
          rowSpanNum++
        }
      })
      // 结束下标
      let indexIdLength = index + rowSpanNum
      console.log('indexIdLength=', indexIdLength, index, rowIndex)
      return {
        style: {
          display: index < rowIndex && rowIndex < indexIdLength ? 'none' : undefined
        },
        attrs: {
          rowSpan: rowIndex === index ? rowSpanNum : 1
        }
      }
    }
  }
}
</script>