element ui table进行相同数据合并单元格

示例如图

//要合并的项（自定义）
const columnArr =  ["dq","sj","xj","zj","zjj","zjfzr","nhxm","nhsjh","nhsfzh","","","","","ddzhl","ddw"]

首先计算需要合并的单元格

const spanData = ref<any>([])
const getSpanData = (data) => {
  columnArr.forEach((element) => {
    let contactDot = 0;
    const spanArr = <any>[];
    data.forEach((item, index) => {
      if (index === 0) {
        spanArr.push(1);
      } else {
        //先判断ID是否一样，再合并同类项
        if (item.id == data[index - 1].id && item[element] === data[index - 1][element]) {
          spanArr[contactDot] += 1;
          spanArr.push(0);
        } else {
          contactDot = index;
          spanArr.push(1);
        }
      }
    });
    spanData.value.push(spanArr);
  });
}

Table上绑定 span-method 属性

<el-table ref="roleTableRef" :data="dataList" :span-method="objectSpanMethod">

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnArr.includes(column.property)) {
    if (spanData.value[columnIndex][rowIndex]) {
      return {
        rowspan: spanData.value[columnIndex][rowIndex],
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
}