elementUI table 合并表格

参考链接: link.

<template>
	<el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%"
        :span-method="arraySpanMethod"
      ></el-table>
</template>


getList() {
      listDocumentByTaskId(this.projectTaskId).then((res) => {
        if (res.code === 0) {
          res.data?.length > 0 ? (this.type = 1) : (this.type = 2);
          this.tableData = res.data;
          this.tableData = this.mergeTableRow({ // 合并通用函数
            data: this.tableData,
            mergeColNames: ["documentClass", "nature"], // 需要合并的列，默认合并列相同的数据
            firstMergeColNames: ["documentClass", "nature"], // 受影响的列，只合并以firstMerge为首的同类型数据
            firstMerge: "documentClass", // 以哪列为基础进行合并，一般为第一列
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },

// elementUI 中表格合并行的api方法
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    const span = column["property"] + "-span";
    if (row[span]) {
      return row[span];
    }
  },

//合并通用函数
mergeTableRow(config) {
      let data = config.data;
      const { mergeColNames, firstMergeColNames, firstMerge } = config;
      if (!mergeColNames || mergeColNames.length === 0) {
        return data;
      }
      mergeColNames.forEach((m) => {
        const mList = {};
        data = data.map((v, index) => {
          const rowVal = v[m];
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            const flag =
              firstMergeColNames.filter((f) => {
                return f === m;
              }).length !== 0;
            const mcFlag =
              mergeColNames.filter((mc) => {
                return mc === firstMerge;
              }).length === 0;
            if (
              (mcFlag && flag) ||
              (flag &&
                data[index][firstMerge + "-span"] &&
                data[index][firstMerge + "-span"].rowspan === 1)
            ) {
              v[m + "-span"] = {
                rowspan: 1,
                colspan: 1,
              };
            } else {
              data[mList[rowVal]["index"]][m + "-span"].rowspan++;
              v[m + "-span"] = {
                rowspan: 0,
                colspan: 0,
              };
              mList[rowVal]["num"]++;
              mList[rowVal]["newIndex"]++;
            }
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };
            v[m + "-span"] = {
              rowspan: 1,
              colspan: 1,
            };
          }
          return v;
        });
      });
      return data;
    },