el-table合并单元格

1、新建utils/colMethod.js

export function colMethod(columnArr, data) {
    // columnArr 合并行所在的列字段
    // data 需要合并的表格数据
    let column = {}
    let position = 0
    // 遍历合并的列数据
    columnArr.forEach((prop) => {
      column[prop] = []
      //  遍历合并的行数据
      data.forEach((row, rowIndex) => {
        // 第N列第一行
        column[prop][rowIndex] = [1, 1]
        if (rowIndex === 0) {
          // 记录当前行号
          position = 0
        } else if (row[prop] === data[rowIndex - 1][prop]) {
          // 当前行数据等于上一行，根据记录的行号，计算需要合并几行。
          column[prop][position][0] += 1
          // 当前行 隐藏不显示
          column[prop][rowIndex][0] = 0
        } else {
          // 不相等之后，重置记录行号
          position = rowIndex
        }
      })
    })
    return column
  }

2、页面使用

<el-table :span-method="mergeTable">
<el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
</el-table>

//引入
import { colMethod } from "@/utils/colMethod";

//data
      mergeArr: {},
      indexNum: {},

//方法
    //获取到列表数据后
        this.mergeArr = colMethod(
          ["deviceName", "deviceStateName"],//要合并的列字段
          this.tableList
        );
        this.indexobj(); //排列序号


// 合并单元格
    mergeTable({ row, column, rowIndex, columnIndex }) {
   
      let arr = this.mergeArr[column.property] || [];
      // 根据deviceName合并
      if ((column.type == "index" || column.type == "selection"||column.property == "deviceStateName") && this.mergeArr["deviceName"])
        return this.mergeArr["deviceName"][rowIndex];
      else if (arr.length) return arr[rowIndex];
      else [1, 1];
    },

// 排列序号
    indexobj() {
      var num = 0;
       //序号根据那个字段合并
      this.mergeArr["deviceName"].forEach((item, index) => {
        if (item[0] != 0) {
          this.indexNum[index] = num += 1;
        }
      });
    },
    // 自定义序号
    indexMethod(index) {
      return this.indexNum[index];
    },

el-table合并单元格

悦读