vue table页合并相同数据单元格

本文介绍如何使用 Vue.js 的 Element UI 实现数据表格 `nodeFinancepriceListtable` 的行合并,通过flitterData方法根据节点名称、类型和能源名称自动合并重复单元格,提高数据展示效率。
摘要由CSDN通过智能技术生成

nodeFinancepriceList table 数据信息

<el-table v-loading="loading" :data="nodeFinancepriceList" :span-method="objectSpanMethod" >

flitterData(arr){
      let spanOneArr = [],
        spanTwoArr = [],
        spanThreeArr = [],
        concatOne = 0,
        concatTwo = 0,
        concatThree =0;
      // debugger
      arr.forEach((item,index)=>{
        if(index === 0){
          spanOneArr.push(1);
          spanTwoArr.push(1);
          spanThreeArr.push(1);
        }else{
          if(item.nodeName === arr[index - 1].nodeName){ //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          }else{
            spanOneArr.push(1);
            concatOne = index;
          };
          if(item.type === arr[index - 1].type&&item.nodeName === arr[index - 1].nodeName){//第二列需合并相同内容的判断条件
            spanTwoArr[concatTwo] += 1;
            spanTwoArr.push(0);
          }else{
            spanTwoArr.push(1);
            concatTwo = index;
          };
          if(item.nodeName === arr[index - 1].nodeName&&item.energyName === arr[index - 1].energyName){ //第三列需合并相同内容的判断条件
            spanThreeArr[concatThree] += 1;
            spanThreeArr.push(0);
          }else{
            spanThreeArr.push(1);
            concatThree = index;
          };
        }
      });
      return  {
        one: spanOneArr,
        two: spanTwoArr,
        three: spanThreeArr
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if(columnIndex === 0 ) {
        const _row = (this.flitterData(this.nodeFinancepriceList).one)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      // if(columnIndex === 2) {
      //   const _row = (this.flitterData(this.nodeFinancepriceList).two)[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col
      //   };
      // }
      if(columnIndex === 1) {
        const _row = (this.flitterData(this.nodeFinancepriceList).three)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值