el-table合并单元格

合并单元格

合并单元格

   对需要合并的表格绑定     :span-method="objectSpanMethod" 


   在获取数据后处理数据
   与table绑定的数组 = this.mergeTableRow(table绑定的数组, [要合并的值即某列单元格'categoryId',要合并的值即某列单元格 'simpleName'])

    
    //合并单元格    处理函数
    
    mergeTableRow(data, merge) {
    //判断是否有值需要处理
      if (!merge || merge.length === 0) {
        return data
      }
      // console.log(data);
      //进行处理
      merge.forEach((m,i) => {
        const mList = {}
        //设置n值,以便后续判断数值,此行值是否和上一行为一类,this.objectSpan为判断当前第一列为何值的判断依据,未写出来，此例categoryId为品类的key,simpleName为供应商的key，this.objectSpan为true时是以品类排序
        let n=null
        if(this.objectSpan){
          n= 'categoryId'
        }else{
           n= 'simpleName'
        }
        data = data.map((v, index) => {
          const rowVal = v[m]
          //v[n]==data[index -1][n])判断当前行和上一行的品类或供应商值是否相同
          if (mList[rowVal] && mList[rowVal].newIndex === index && v[n]==data[index -1][n] ) {
            mList[rowVal]['num']++
            mList[rowVal]['newIndex']++
            data[mList[rowVal]['index']][m + '-span'].rowspan++
            v[m + '-span'] = {
              rowspan: 0,
              colspan: 0
            }
            
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
            v[m + '-span'] = {
              rowspan: 1,
              colspan: 1
            }
          }
          return v
        })
      })
      return data
    },
        //  合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       const span = column['property'] + '-span'
          if(row[span]){
              return row[span]
          }
     
    },
   

获取合并单元改组的某值合并值

    <template slot-scope="scope">
               {{scope.row | tableEveryOrder(scope.$index)}}
           </template>
       </el-table-column> 
       
  在过滤器中
   tableEveryOrder:function(val,i){
   //获取到当前行的索引号 i,el-table索引号可通过scope.$index得到,val为所传值scope.row
     console.log(i);
     console.log(val)
     // 总订单数
     let numberOrderNow = 0
     // 合并的行数
     let num =null
      let n = null
     Object.keys(val).forEach(function(key,j,v){
           // console.log(key)
           // console.log(i);
           //val中有categoryId-span可以确定当前合并的行数或列数
           if(key=='categoryId-span'){
             //  console.log(val[key])
             
               // console.log(val[key].rowspan)
               num = val[key].rowspan
           }
       }),
       // console.log(num,'合并行数')
       //相加得到一共需要处理到的目标值的行的索引号
       n =num + i-1
       console.log(numberOrderNow,num,n);
       //遍历表格绑定值获取范围i到n的某值
       that.afterSaleList.forEach((item,t)=>{
           if(n>=t && t>=i){
             numberOrderNow=numberOrderNow+item.orderNum
           }
       })  
     return numberOrderNow
   }