vue+element的table合并单元格(竖着合并行)及合计行添加并计算

news2024/12/23 20:30:45

1 效果:

代码分析:

1 表格头配置:

2 懒得写的:自己复制吧

 <el-table
        :data="tableData"
        style="width: 98%"
        :height="height"
        v-loading="isLoading"
        stripe="false" 
        :span-method="objectSpanMethod"
        show-summary
        :summary-method="getSummaries"
        border
       
      >

3 合并单元格函数(从整合数据开始)

3-1(数组结构要1维数组,嵌套的需要转换,方法和解释都在,有需要的拿,根据自己字段改改就行)

3-1 代码:

 var objarr = []   
objarr.forEach(itemparent =>{
      if(itemparent.areaInfos){
      itemparent.areaInfos.forEach(itemchildren=>{
        this.tableData.push({
          deptName : itemparent.deptName,
          deptCount : itemparent.deptCount,
          deptCameraCount : itemparent.deptCameraCount,
          processingRatio : itemparent.processingRatio,
          timelinessRatio : itemparent.timelinessRatio,
          areaName : itemchildren.areaName,
          alarmCount : itemchildren.alarmCount,
          dealCount : itemchildren.dealCount,
          inTimeCount : itemchildren.inTimeCount,
          cameraCount : itemchildren.cameraCount
        })
      })
      }
    })
  this.id_init()

3-2 方法

3-2 函数代码:

 //合并单元格
   id_init() {
         this.id_array = []
         this.id_pos = 0
         for(let i = 0 ; i < this.tableData.length; i++) {
             // 如果当 i == 0 说明数据是第一行, 需要重新赋值
             if(i == 0) {
                 // this.id_array.push(1) 说明这一行数据被显示出来
                 this.id_array.push(1)
                 // this.id_pos = 0 重置当前的计数器
                 this.id_pos = 0
             }
             // 说明不是从第一行开始遍历的
             else {
                 // 判断当前的指定数据是否和之前的指定数据值相同
                 if(this.tableData[i].deptName == this.tableData[i-1].deptName) {
                     // 如果相同就需要将 this.id_array 的数据自加
                     this.id_array[this.id_pos] += 1
                     // 同时需要将 this.id_array push一个0 表示下一行不用显示
                     this.id_array.push(0)
                 }
                 // 说明 当前的数据和上一行的指定数据不同
                 else {
                     // this.id_array.push(1) 说明当前一行的数据需要显示
                     this.id_array.push(1)
                     // 重新给计数器赋值
                     this.id_pos = i
                 }
             }
         }
     },
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
         // 用于给某一列的table判断是否合并,下标0则是第一列,需要合并多个列可以写多个条件
         if(columnIndex === 0 || columnIndex === 5 || columnIndex === 6) {
             // this.id_array[rowIndex] 取出当前存放行的合并状态
             const _row = this.id_array[rowIndex] 
             // 判断当前的 列是否需要显示
             const _col = _row > 0 ? 1 : 0
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
     },

4:合计列的显示与计算

合计的函数代码:

 getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index];
          } else {
             if (index === 5) {
            sums[index] = Math.round((sums[3] / sums[2]) * 100) + '%';
          }else if(index === 6){
            sums[index] =  Math.round((sums[4] / sums[2]) * 100) + '%';
          }else{
            sums[index] = '';
          }
          }
        });
        return sums;
      },