码迷,mamicode.com
首页 > 其他好文 > 详细

element UI表格合并的方法

时间:2021-02-27 13:04:55      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ret   method   this   数组   tab   asc   dea   使用   ++   

简单记一下使用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换一下就可以了

element UI表格合并的方法

标签:ret   method   this   数组   tab   asc   dea   使用   ++   

原文地址:https://www.cnblogs.com/liuqin-always/p/14452682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!