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

前言

Vue结合ElementUI是一个流行的前端技术组合，用于快速开发和搭建桌面端的界面。以下是关于这个组合的详细介绍：

1. 组件库：ElementUI是基于Vue 2.x版本开发的一套组件库。它为开发者提供了一系列的预制组件，如布局、导航、输入框、选择器等，这些组件均已预先设计好样式并封装了常用功能，使得开发者能够高效地构建出整洁且风格一致的用户界面。
2. 技术栈：vue-element-admin是一个以Vue和ElementUI为核心的后台管理系统解决方案。它不仅包含了ElementUI提供的组件，还整合了诸如国际化(i18n)、动态路由、权限验证等高级功能，帮助开发者构建企业级的中后台产品原型。
3. 安装与使用：要在Vue项目中使用ElementUI，首先需要通过npm或yarn将其安装到项目当中，然后在项目的main.js文件里引入ElementUI的样式和组件。完成这些步骤后，就可以在Vue组件中使用ElementUI提供的各类UI组件来构建页面了。
4. 主题定制：ElementUI支持自定义主题，你可以通过在线主题生成器或者手动配置，来更改组件库的颜色、字体等样式，以满足项目的个性化需求。
5. 版本更新：随着Vue框架的发展，ElementUI也在不断更新迭代。目前已经有了适配Vue 3.x版本的Element Plus，为使用最新版本Vue的开发者提供了更多的选项。

Vue与ElementUI的结合为开发者提供了一个高效且功能强大的开发方式，特别是对于需要快速搭建具有丰富交互和良好用户体验的Web应用程序来说，这一组合无疑是一个极佳的选择。

---

正文开始~

此博客通过投机取巧的方法，将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] = <p class="count_row">合计<br /><br />已检查<br /><br />需检查<br /><br />检查率<br /><br />整改率</p>
          return
        }
......
})

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

 效果图：

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

---

 多行合并行内容区域列

先展示整体的效果图：

代码样例：

    /**
          ** 表格最下方的多个【伪合并行==》因为实际是一个大的合计行】 ，如总计、整改率、检查率 数据行的填充方法
          * !通过在插入数组数据时，直接插入p标签和<br\>换行符，达到多个合计行的效果
        */
    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] = <p class="count_row">合计<br /><br />已检查<br /><br />需检查<br /><br />检查率<br /><br />整改率</p>
          return
        }
        /**
           1.通过判断当前循环到哪个表格 column.property==>[表头字段名称]了，然后往sums数组里面的对应位置插入数据
         ** 通过 <br /> 实现换行==》多个合计行
         *! 在数组里插入html标签后，只要通过 {} 将数据处理包裹起来，就不会再被当成字符串了
         *? case 'wcStructure':  ===>一共有多少个表头，就有多少个case，用于根据表头，判断当前列，来生成这一列的最底部合并行的数据
       */
        switch (column.property) {
          // 第一列的合并行数据
          // ! sums[index] ===> 就是根据column.property 找到的对应列  的  最下方的合并行
          // ? {this.wcStructure.totalNumber} ===> 获取获取后端返回数据中，【wcStructure】对象的总计totalNumber
          // ===> 注意，填充数据的顺序要跟名称行对应好
          case 'wcStructure':
            sums[index] = <p class="count_row">{this.wcStructure.totalNumber}<br /><br />
              {this.wcStructure.checkedNumber}<br /><br />
              {this.wcStructure.needToCheckNumber}<br /><br />
              {this.toPercent(this.wcStructure.inspectionRate)}<br /><br />
              {this.toPercent(this.wcStructure.correctionRate)}
            </p>
            break
          // 第二列的合并行数据
          case 'balconyStructure':
            sums[index] = <p class="count_row">{this.balconyStructure.totalNumber}<br /><br />
              {this.balconyStructure.checkedNumber}<br /><br />
              {this.balconyStructure.needToCheckNumber}<br /><br />
              {this.toPercent(this.balconyStructure.inspectionRate)}<br /><br />
              {this.toPercent(this.balconyStructure.correctionRate)}
            </p>
            break
          // 第三列的合并行数据
          case 'bathroomWaterProof':
            sums[index] = <p class="count_row">{this.bathroomWaterProof.totalNumber}<br /><br />
              {this.bathroomWaterProof.checkedNumber}<br /><br />
              {this.bathroomWaterProof.needToCheckNumber}<br /><br />
              {this.toPercent(this.bathroomWaterProof.inspectionRate)}<br /><br />
              {this.toPercent(this.bathroomWaterProof.correctionRate)}
            </p>
            break
              ........
              ........
          default:
            // sums[index] = '/'
            sums[index] = <p>/</p>
            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，通过<br/>换行，实现多行的效果 

 

---

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！