vue el-table 合并单元格行的方法

 在页面load的时候，对表格渲染的数据进行处理：(这里我穿了两个参数，一个是需要合并的数组，一个是表格行的字段属性。）可以理解成对数组进行标记。

 const getSpanArr = (data: any[], name: string) => {
    for (let i = 0; i < data?.length; i++) {
      if (i === 0) {
        spanArr.value.push(1);
        pos.value = 0;
      } else {
        if (data[i][name] === data[i - 1][name]) {
          spanArr.value[pos.value] += 1;
          spanArr.value.push(0);
        } else {
          spanArr.value.push(1);
          pos.value = i;
        }
      }
    }
  };

调用：(这里我传了两个参数，productTable是我表格绑定的数据，title是我要合并的行。）

const load = async () => {
  getSpanArr(productTable.value, "title");
};

对表格渲染的数据处理好后，开始计算每一行的每一列他需要占的行数，并记录下拉（我这里传了个参数，是表格的第几列需要合并，可以传一个数组）

const objectSpanMethod = ({ A }: any, columnIndexArray: number[]) => {
    if (columnIndexArray.includes(A.columnIndex)) {
      const _row = spanArr.value[A.rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
  };

 最后，在el-table中使用 :span-method="((A:any) => objectSpanMethod({ A }, [0, 5])) as any"

 封装好的代码：：

import { ref } from "vue";

export function spanTableRow() {
  const spanArr = ref([]);
  const pos = ref();
  const getSpanArr = (data: any[], name: string) => {
    for (let i = 0; i < data?.length; i++) {
      if (i === 0) {
        spanArr.value.push(1);
        pos.value = 0;
      } else {
        if (data[i][name] === data[i - 1][name]) {
          spanArr.value[pos.value] += 1;
          spanArr.value.push(0);
        } else {
          spanArr.value.push(1);
          pos.value = i;
        }
      }
    }
  };
  const objectSpanMethod = ({ A }: any, columnIndexArray: number[]) => {
    if (columnIndexArray.includes(A.columnIndex)) {
      const _row = spanArr.value[A.rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
  };
  return {
    getSpanArr,
    objectSpanMethod,
  };
}