element-ui el-table合并单元格

合并单元格，如果id一样则合并(字段根据业务定义,返回是一维数据,getSpanArr重新整合)

实现原理

getSpanArr(data)方法 data就是我们从后台拿到的数据，通常是一个数组；spanArr是一个空的数组，用于存放每一行记录的合并数；pos是spanArr的索引。如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，０即表示该行不显示。

export default {
data () {
return {
spanArr:[],
pos: 0
}
},
methods: {
  getSpanArr(data) {
    this.spanArr = []
    this.pos =  0
    for (let i = 0; i < data.length; i++) {
      if (i === 0) {
        this.spanArr.push(1);
        this.pos = 0
      } else {
        // 判断当前元素与上一个元素是否相同
        if (data[i].id === data[i - 1].id) {
          this.spanArr[this.pos] += 1;
          this.spanArr.push(0);
        } else {
          this.spanArr.push(1);
          this.pos = i;
        }
      }
    }
    console.log('194',this.spanArr)
  },
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  // row.channelInfoDtoList.length 这个值是通道的length，
  // 就是需要合并的行数 合并行或列的计算方法。方法的参数是一个对象，里面包含
// 当前行row、
  // 当前列column、
  // 当前行号rowIndex、
  // 当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
  if (columnIndex === 1 || columnIndex === 2 || columnIndex === 7) {
    const _row = this.spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
      return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
        rowspan: _row,
        colspan: _col
      }
  }
},

}
}

element-ui table 表头合并方法实操如下：

 

 

      
      



headerStyle ({ row, column, rowIndex, columnIndex }: any) {
    row[2].colSpan = 2  //第几列合并,合并多少列表头
    row[3].colSpan = 0
    if (columnIndex === 3) {
      return 'display: none'
    }
  }