Vue 动态实现合并table表格多列多行


官网网址:https://element.eleme.cn/#/zh-CN/component/table

1,先提供最终的实现效果图:

下面的table是根据上面3个表的长度动态生成的。在这里插入图片描述

2,先提供最终的动态实现代码:

    //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //动态生成table表格的list
      var subLength=this.priceSubList.length;

      //运输方式动态生成table表格的list
      var traLength=this.priceTraList.length;
      //KG计算范围动态生成table表格的list
      var kgLength=this.priceKgList.length;
       //M3计算范围动态生成table表格的list
      var m3Length=this.priceM3List.length;
      var totalLength=kgLength+m3Length;
      
      //第一列
      if (columnIndex === 0) {
          if (rowIndex % totalLength === 0) {
            return {
              rowspan: totalLength,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
      }
       //第二列
      if (columnIndex === 1) {
        var num=subLength/traLength;

        //动态实现
       if(kgLength!=0){
         for(var i=0;i<traLength;i++){
         if(rowIndex<(i+1)*num){
          if(rowIndex==i*num){
                  return {
                    rowspan: kgLength,
                    colspan: 1
                  };
          }else if(rowIndex <i*num+kgLength-1){
                  return [0,0]
          }else if(rowIndex ==i*num+kgLength){
                  return {
                     rowspan: m3Length,
                     colspan: 1
                  };
          }else{
                  return [0,0]
          }
         }
         }
        }else{ //若kgLength=0,需要以m3Length为主
         for(var i=0;i<traLength;i++){
         if(rowIndex<(i+1)*num){
          if(rowIndex==i*num){
                  return {
                    rowspan: m3Length,
                    colspan: 1
                  };
          }else if(rowIndex <i*num+m3Length-1){
                  return [0,0]
          }else if(rowIndex ==i*num+m3Length){
                  return {
                     rowspan: m3Length,
                     colspan: 1
                  };
          }else{
                  return [0,0]
          }
         }
         }
        }

        //代码写死!(在下面的代码有助于理解它是如何动态实现的)
        //0
        //num
        //2*num
        
         //注意:获取this.priceSubList的方法,需要排序,
         //目前我这里的排序是kgLength相关的数据优先于m3Length数据,所以是这样实现
         
        // if(rowIndex<1*num){
        //   if(rowIndex==0*num){
        //           return {
        //             rowspan: kgLength,
        //             colspan: 1
        //           };
        //   }else if(rowIndex <kgLength-1){
        //           return [0,0]
        //   }else if(rowIndex ==kgLength){
        //           return {
        //              rowspan: m3Length,
        //              colspan: 1
        //           };
        //  }else{
        //           return [0,0]
        //   }
        // }else if(rowIndex<2*num){
        //   if(rowIndex==1*num){
        //           return {
        //             rowspan: kgLength,
        //             colspan: 1
        //           };
        //   }else if(rowIndex <num+kgLength-1){
        //           return [0,0]
        //   }else if(rowIndex ==num+kgLength){
        //           return {
        //              rowspan: m3Length,
        //              colspan: 1
        //           };
        //  }else{
        //           return [0,0]
        //   }
        // }else if(rowIndex<3*num){
        //   if(rowIndex==2*num){
        //           return {
        //             rowspan: kgLength,
        //             colspan: 1
        //           };
        //   }else if(rowIndex <2*num+kgLength-1){
        //           return [0,0]
        //   }else if(rowIndex ==2*num+kgLength){
        //           return {
        //              rowspan: m3Length,
        //              colspan: 1
        //           };
        //  }else{
        //           return [0,0]
        //   }
        // }

      }

    },

3,要想看得懂,首先需要看得懂官方的提供的例子。


版权声明:本文为hylshyshm原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。