ElementUi分层级进行合并列

<el-table :data="data" border :span-method="objectSpanMethod">



onMounted(() => {
  setTabelRowSpan(需要合并的数组data,分层级合并的字段名称数组)
}) 

function setTabelRowSpan(tableData, fieldArr){
  let lastItem = {};
  fieldArr.forEach((field, index) => {
    tableData.forEach(item => {
      item.mergeCell = fieldArr;
      const rowSpan = `rowspan_${field}`
      //判断是否合并到上个单元格。
      if(fieldArr.slice(0, index + 1).every(e => lastItem[e] === item[e])){
        //是：合并行
        item[rowSpan] = 0;
        lastItem[rowSpan] += 1;
      }else{
        //否：完成一次同类合并。lastItem重新赋值，进入下一次合并计算。
        item[rowSpan] = 1;
        lastItem = item;
      }
    })
  })
}
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  //判断当前单元格是否需要合并
  if (row.mergeCell.includes(column.property)) {
    const rowspan = row[`rowspan_${column.property}`]
    if (rowspan) {
      return {rowspan: rowspan, colspan: 1};
    } else {
      return {rowspan: 0, colspan: 0};
    }
  }
}