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

最新推荐文章于 2024-06-07 11:28:14 发布

weixin_45750619

最新推荐文章于 2024-06-07 11:28:14 发布

阅读量374

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45750619/article/details/125678037

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
        };
      }
    },