vue3处理表格合并相同列

const needToMergeColumns=ref(["departmentName","userName"]);

//给el-table的:span-method赋值方法objectSpanMethod

const objectSpanMethod = ({ row, column, rowIndex, columnIndex}) => {

  if (needToMergeColumns.value.indexOf(column.property) !== -1) {

    // 获取当前单元格的值

    const currentValue = row[column.property];

    // 获取上一行相同列的值

    const preRow = tableData.value[rowIndex - 1];

    const preValue = preRow ? preRow[column.property] : null;

    // 如果当前值和上一行的值相同，则将当前单元格隐藏

    if (currentValue === preValue) {

      return { rowspan: 0, colspan: 0 };

    } else {

      // 否则计算当前单元格应该跨越多少行

      let rowspan = 1;

      for (let i = rowIndex + 1; i < tableData.value.length; i++) {

        const nextRow = tableData.value[i];

        const nextValue = nextRow[column.property];

        if (nextValue === currentValue) {

          rowspan++;

        } else {

          break;

        }

      }

      return { rowspan: rowspan, colspan: 1 };

    }

  }

};