zoukankan      html  css  js  c++  java
  • 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换一下就可以了

  • 相关阅读:
    迭代器,可迭代对象,生成器区别
    七大经典排序算法
    二叉排序树的插入、生成、删除及查找操作
    二分查找(折半查找)
    顺序查找
    二叉树的创建、遍历及应用
    (原创)一些常见小程序(C)
    顺序队列
    二叉树的创建
    Vue开源项目库汇总
  • 原文地址:https://www.cnblogs.com/liuqin-always/p/14452682.html
Copyright © 2011-2022 走看看