element UI表格合并的方法

简单记一下使用element UI表格涉及到合并时的方法:

1. 合并行:

 先对数据做处理:

dealWithData () {
      const result = []
      let pos = 0
      const data = this.tableData
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录(即索引是0的时候),向数组中加入1
          result.push(1)
          pos = 0
        } else {
       // 这里company是我的数据里用到的,如果是合并其他的字段,改为其他的就可以了
          if (data[i].company === data[i - 1].company) {
            // 如果useName相等就累加,并且push 0
            result[pos] += 1
            result.push(0)
          } else {
            // 不相等push 1
            result.push(1)
            pos = i
          }
        }
      }
      this.spanArr = result
    },

  然后在写渲染函数:

arraySpanMethod ({ column, rowIndex, columnIndex }) {
     // 这里我是对第二列进行合并行的,可以改为其他的列
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },

 2. 如何是合并列,也跟合并行差不多,处理函数找到合并列的规则,然后渲染函数,row和col换一下就可以了

posted @ 2021-02-26 15:48  骄阳似我_lq  Views(900)  Comments(0Edit  收藏  举报