Vue3 el-table 如何动态合并单元格的行与列

1. 单元格合并列：

const setTableColumnSpan = (
  tableData: any,
  fieldArr: any,
  effectRows: Array<number>
) => {
  tableData.forEach((item: any, index: any) => {
    if (effectRows.includes(index)) {
      let lastField = "";
      let lastColspan = "";
      fieldArr.forEach((field: any) => {
        const colspan = `colspan_${field}`;
        if (item[field] === item[lastField]) {
          item[colspan] = 0;
          item[lastColspan] += 1;
        } else {
          item[colspan] = 1;
          lastColspan = colspan;
          lastField = field;
        }
      });
    }
  });
};

2. 单元格合并行：

const setTabelRowSpan = (tableData: any, fieldArr: any, effectMerge = {}) => {
  let lastItem = {};
  fieldArr.forEach((field: any, index: any) => {
    let judgeArr = fieldArr.slice(0, index + 1);
    if (effectMerge[field]) {
      judgeArr = [...effectMerge[field], field];
    }
    tableData.forEach((item: any) => {
      item.mergeCell = fieldArr;
      const rowSpan = `rowspan_${field}`;
      if (
        judgeArr.every((e: any) => lastItem[e] === item[e] && item[e] !== "")
      ) {
        item[rowSpan] = 0;
        lastItem[rowSpan] += 1;
      } else {
        item[rowSpan] = 1;
        lastItem = item;
      }
    });
  });
};

3. 执行调用合并：

const executeMerge = (data: any) => {
  let effectRows = [0];
  let fieldArr = ["ID", "columnTitle1", "columnTitle2", "columnTitle3"].concat(
    titleList.value
  ); //全部字段
  let RowfieldArr = ["columnTitle1", "columnTitle2"];
  setTableColumnSpan(data, fieldArr, effectRows); // （表格数据，表格字段，合并列
  setTabelRowSpan(data, RowfieldArr); // （表格数据，表格字段，合并的条件）
  //如果要用到合并条件：参考如下
  // const effectMerge = {
  //      month_1: ['area'],//一月参照区域进行合并
  //      month_3: ['area']//三月参照区域合并
  //  }
};


const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (effectRows.includes(rowIndex)) {
    const colspan = row[`colspan_${column.property}`];
    if (colspan) {
      return { rowspan: 1, colspan: colspan };
    } else {
      return { rowspan: 0, colspan: 0 };
    }
  }
  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 };
    }
  }
};

4. 方法

        <el-table
          :data="schedulTable"
          :span-method="objectSpanMethod"
          :show-header="false"
          border
        >
        </ el-table