element-plus table 单元格合并

• 单元格深层次合并

html

tableConfig: {
  // 合并的属性字段计算
  combineProp: ["bridgeId"],
  tableIndex: [1],
},

<el-table
  :data="tableList"
  border
  :span-method="objectSpanMethod(tableConfig)"
  highlight-current-row
  v-loading="loading"
></el-table>

methods: {
  objectSpanMethod,
 
}

this.tableList = mergeRowspan(
    this.tableData,
    this.tableConfig.combineProp
);

js

/**
 * element-plus 单元格合并
 * tableConfig: {
 *    combineProp: ["bridgeId"], // 需要合并的字段key,按顺序树状合并
 *    tableIndex: [0], // 列表合并列的下标和combineProp对应
 * }
 * 
 * 
*/

export const mergeRowspan = (tableData, combineProp) => {
  if (!tableData.length) {
    return tableData;
  }
  // 读取配置
  // 判断基准值是否存在 | 基准值是否tableData中数据的属性
  if (!combineProp[0] || !tableData[0][combineProp[0]]) {
    return tableData;
  }
  const fn = (tableData, i = 0) => {
    let column = combineProp[i];
    let tableDataGroup = tableData.reduce((pre, current) => {
      if (!pre[current[column]]) {
        current[`${column}Span`] = {
          rowspan: 1,
          colspan: 1,
        };
        pre[current[column]] = [current];
        return pre;
      } else {
        current[`${column}Span`] = {
          rowspan: 0,
          colspan: 0,
        };
        pre[current[column]][0][`${column}Span`].rowspan =
          pre[current[column]].length + 1;
        pre[current[column]].push(current);
        return pre;
      }
    }, {});
    i++;
    if (combineProp[i]) {
      for (let key in tableDataGroup) {
        tableDataGroup[key] = fn(tableDataGroup[key], i);
      }
    }
    return tableDataGroup;
  };
  let tableDataGroup = fn(tableData);
  const treeToArray = (tree) => {
    // 判断 tree 是否有值，无返回 []
    if (Array.isArray(tree) && tree.length) return Array.from(tree);
    let res = [];
    for (let key in tree) {
      res.push(...treeToArray(tree[key]));
    }
    return res;
  };
  let list = treeToArray(tableDataGroup);
  return list;
}
/**
 * element-plus el-tabel span-method 函数
 * 使用方式
 * :span-method="objectSpanMethod(tableConfig)"
 * 
*/
export const objectSpanMethod = (tableConfig) => {
  // 需要合并的列，需求是合并第一、二列
  return ({ row, column, rowIndex, columnIndex }) => {
    let list = tableConfig.combineProp;
    let indexlist = tableConfig.tableIndex;
    for (let i = 0; i < list.length; i++) {
      if (!row[list[i]]) break;
      if (indexlist[i] === columnIndex) {
        let rowspan = row[`${list[i]}Span`]["rowspan"];
        let colspan = row[`${list[i]}Span`]["colspan"];
        return {
          rowspan: rowspan,
          colspan: colspan,
        };
      }
    }
  };
}