element-ui动态合并行

一、处理列表数组,统计需要合并的列,如这里需要合并的是tableData里面的date。其实就是计算哪个合并的值,需要合并多少行。

      // 建立相同行关系
     \// 按key为合并行名,value为合并行数存储
      // 计算相同行key值和行数
      this.tableData.map(item => {
        if (item.date in this.colSpan) {    // 判断当前已有值在相同行关系列表中,有则递增,没有则赋值为1
          this.colSpan[item.date]++  
        } else {
          this.$set(this.colSpan,item.date,1)
        }
      })

二、element-ui table组件里的span-method属性添加以下逻辑

spanMethod({ row, column, rowIndex, columnIndex }) {
      // 第一列时
      if (columnIndex === 0) {
        if (row.date in this.colSpan) {
          const obj = {
            // 设置合并值
            rowspan: this.colSpan[row.date],
            colspan: 1
          }
          delete this.colSpan[row.date]
          return obj
        } else {
          // 其余被合并子项隐藏
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。