526互联

element UI 合并table上下单元格

发布时间 2023-05-08 17:36:53作者: 空明师兄

写了半天，写个记录 方便后续碰到了使用。


/**
 * 根据 表信息 与 要合并的 字段信息 计算要合并的信息 用于 合并
 * @param {*} list 表信息
 * @param {*} mergeFields 要合并的字段信息
 * @param {*} mainField 依据 什么进行的 单元格合并 不传 就 自然合并
 * @returns 计算 合并的结果
 */
export function recordMergeInfo(list, mergeFields, mainField) {
  const mergeObj = {};
  mergeFields.forEach((key) => {
    let count = 0; // 用来记录需要合并行的起始位置
    mergeObj[key] = []; // 记录每一列的合并信息
    list.forEach((item, index) => {
      // index == 0表示数据为第一行，直接 push 一个 1
      if (index === 0) {
        mergeObj[key].push(1);
        // debug 用 不用注掉
        // if (mainField) {
        //   mergeObj[`main-${mainField}`] = item[mainField]
        // }
      } else {
        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
        if (item[key] === list[index - 1][key] &&( !mainField || item[mainField]=== list[index - 1][mainField])) {
          mergeObj[key][count] += 1;
          mergeObj[key].push(0);
        } else {
          // 如果当前行和上一行其值不相等
          count = index; // 记录当前位置
          mergeObj[key].push(1); // 重新push 一个 1
        }
      }
    });
  });
  return mergeObj;
}


const crtMergeTableFields = [
  "class",
  ...
];

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 调用这个之前  一定要先 将得到的列表数据 计算出来 mergeObj 数据
      if (crtMergeTableFields.includes(column.property)) {
        // 判断其值是不是为0
        if (this.mergeObj?.[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1];
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },

 // 获取数据后 
     this.mergeObj = recordMergeInfo(
              this.tableData,
              crtMergeTableFields,
              "classId"
            );

 <el-table
      v-loading="loading"
      :data="tableData"
      :span-method="objectSpanMethod"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
...
</el-table>