Vue+elementUI-table组件-多行合计行
用户投稿 学习笔记 20阅读
此博客通过投机取巧的方法，将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/>换行，实现多行的效果
标签：