ant design vue 表格縱向動態合並單元格

js

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

vue 頁面

import { mergeCellKey,renderContent } from '@/utils/mergeCell'
{
            title: '區縣代碼',
            align: 'center',
            dataIndex: 'QXDM',
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {},
              };
              obj.attrs.rowSpan = mergeCellKey(row.QXDM, this.dataSource, 'QXDM')
              return obj;
            },
          },

效果