Vue+elementUI-table组件-多行合计行

此博客通过投机取巧的方法，将table中本来只有一行的合计行，制作成(伪)多行合计行效果

之所以叫做(伪)多行合计行，是因为这个合计行实际上还是一行，只是通过样式改成了多行的模样~

参考博客：

elementui el-table 多行合计、插入标签_Nancy617的博客-CSDN博客https://blog.csdn.net/Nancy617/article/details/112309507

---

elementUI官网样例：

将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中 

 

 

以上为基础的官网样例，基本上就是将合计行的第一格和后面的单元格分离开，单独返回，以实现合计行的制作

---

利用这个思路，可以在sums[0]中设置html内容，添加换行符号，实现多行效果，具体代码如下：

多行合并行文字列

 columns.forEach((column, index) => {
        if (index === 0) {
          // sums[index] ===> 就是根据index==0 找到的第一列  的  最下方的合并行
          sums[index] = 
合计

已检查

需检查

检查率

整改率
          return
        }
......
})

通过返回一段html，同时里面还通过
换行符来将每段文字回车换行 

 效果图：

这样多行合计行的文字列的效果就完成了

---

 多行合并行内容区域列

先展示整体的效果图：

代码样例：

    /**
          ** 表格最下方的多个【伪合并行==》因为实际是一个大的合计行】 ，如总计、整改率、检查率 数据行的填充方法
          * !通过在插入数组数据时，直接插入p标签和换行符，达到多个合计行的效果
        */
    getSummaries (param) {
      // console.log(param)
      const { columns } = param
      const sums = []
      // console.log('columns====>', columns)
      columns.forEach((column, index) => {
        if (index === 0) {
          // sums[index] ===> 就是根据index==0 找到的第一列  的  最下方的合并行
          sums[index] = 
合计

已检查

需检查

检查率

整改率
          return
        }
        /**
           1.通过判断当前循环到哪个表格 column.property==>[表头字段名称]了，然后往sums数组里面的对应位置插入数据
         ** 通过 
 实现换行==》多个合计行
         *! 在数组里插入html标签后，只要通过 {} 将数据处理包裹起来，就不会再被当成字符串了
         *? case 'wcStructure':  ===>一共有多少个表头，就有多少个case，用于根据表头，判断当前列，来生成这一列的最底部合并行的数据
       */
        switch (column.property) {
          // 第一列的合并行数据
          // ! sums[index] ===> 就是根据column.property 找到的对应列  的  最下方的合并行
          // ? {this.wcStructure.totalNumber} ===> 获取获取后端返回数据中，【wcStructure】对象的总计totalNumber
          // ===> 注意，填充数据的顺序要跟名称行对应好
          case 'wcStructure':
            sums[index] = 
{this.wcStructure.totalNumber}


              {this.wcStructure.checkedNumber}


              {this.wcStructure.needToCheckNumber}


              {this.toPercent(this.wcStructure.inspectionRate)}


              {this.toPercent(this.wcStructure.correctionRate)}
            
            break
          // 第二列的合并行数据
          case 'balconyStructure':
            sums[index] = 
{this.balconyStructure.totalNumber}


              {this.balconyStructure.checkedNumber}


              {this.balconyStructure.needToCheckNumber}


              {this.toPercent(this.balconyStructure.inspectionRate)}


              {this.toPercent(this.balconyStructure.correctionRate)}
            
            break
          // 第三列的合并行数据
          case 'bathroomWaterProof':
            sums[index] = 
{this.bathroomWaterProof.totalNumber}


              {this.bathroomWaterProof.checkedNumber}


              {this.bathroomWaterProof.needToCheckNumber}


              {this.toPercent(this.bathroomWaterProof.inspectionRate)}


              {this.toPercent(this.bathroomWaterProof.correctionRate)}
            
            break
              ........
              ........
          default:
            // sums[index] = '/'
            sums[index] = 
/
            break
        }
      })

      return sums
    },
  // 浮点数与百分比转换
    toPercent (point) {
      // var str = Number(point * 100).toFixed(1)  //  .toFixed(1)==>保留小数点后1位，自动四舍五入==> 因为截取了小数位，所以能防止js的运算失真（0.5*100=50.00..1）
      var str = parseInt(point * 100) // parseInt==>也能防止js的运算失真
      str += '%'
      return str
    }

每个case就是一列，然后针对这一列，同理，将这一列的合并行弄成html，通过
换行，实现多行的效果