vue3.x elementUi el-table 表格合并span-method

tableData.value为表格数据, "firstName"为需要合并的字段

<el-table
        :data="tableData"
        border
        isMerge: true
        :span-method="listSpanMethod"
        :cell-style="listCellStyle"
      >
</el-table>

const listSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    let spanArr = getSpanArr(tableData.value, "firstName");

    const _row = spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
};
// 处理合并行的数据
const getSpanArr = (data, spanKey) => {
  let spanArr = [];
  let pos = "";
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1);
      pos = 0;
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i][spanKey] === data[i - 1][spanKey]) {
        spanArr[pos] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        pos = i;
      }
    }
  }
  return spanArr;
};