el-table合并表头,合并行

 

 <el-table
        border
        max-height="700"
        :data="tableData"
        :header-cell-style="handerMethod"
        :span-method="objectSpanMethod"
      >
</el-table>
mergeObj: {},
//需合并的列
mergeArr: ['unitNameOne', 'unitNameTwo', 'unitNameThree', 'jxName'],

 //合并行

//列表获取到数据后调用
rowspan () {
      this.mergeArr.forEach((key, index1) => {
        let count = 0
        this.mergeObj[key] = []
        this.tableData.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1)
          }
          else {
            //若本列上下行内容相同
            if (item[key] === this.tableData[index - 1][key]) {
              //若第一列,直接合并
              if (index1 == 0) {
                this.mergeObj[key][count] += 1
                this.mergeObj[key].push(0)
              }
              //非第一列
              else {
                //若前一列上下行相同,合并
                if (item[this.mergeArr[index1 - 1]] == this.tableData[index - 1][this.mergeArr[index1 - 1]]) {
                  this.mergeObj[key][count] += 1
                  this.mergeObj[key].push(0)
                }
                //若前一列上下行不同,不合并
                else {
                  count = index
                  this.mergeObj[key].push(1)
                }
              }
            }
            else {
              count = index
              this.mergeObj[key].push(1)
            }
          }
        })
      })
    },
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (this.mergeArr.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return {
            rowspan: this.mergeObj[column.property][rowIndex],
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        }
      }
    },

//合并表头

//合并单位表头
    handerMethod ({ row, column, rowIndex, columnIndex }) {
      if (row[0].level == 1) {
        //这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
        row[1].colSpan = 0
        row[3].colSpan = 0
        row[2].colSpan = 3
        if (columnIndex === 1) {
          return { display: 'none' }
        }
        if (columnIndex === 3) {
          return { display: 'none' }
        }
      }
    },

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值