el-table列合并

el-table 中增加属性  :span-method="arraySpanMethodActual"

<el-table 
         :data="arrList"
         border
         :cell-style="addClass"
         style="width: 100%;"
         :max-height="tableHeight"
         :span-method="arraySpanMethodActual">
</el-table>

<script>
    arraySpanMethodActual({ row, column, rowIndex, columnIndex }) {
         if ( columnIndex == 0 ) {
         //要合并的在第几列
         const _row = this.tableCombine().one[rowIndex]
         const _col = _row > 0 ? 1 : 0
         return {
            rowspan: _row,
            colspan: _col, 
         }
         }
      },
      tableCombine() {
         let spanOneArr = [],
         spanTwoArr = [],
         concatOne = 0;
         this.arrList.forEach((item, index) => {
         if (index === 0) {
            spanOneArr.push(1)
            spanTwoArr.push(1)
         } else {
            if (item[1] === this.arrList[index - 1][1]) {
               //第一列需合并相同内容的判断条件
               spanOneArr[concatOne] += 1
               spanOneArr.push(0)
            } else {
               spanOneArr.push(1)
               concatOne = index
            }
         }
         })
         return {
            one: spanOneArr,
            two: spanTwoArr,
         }
      },
</script>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值