此博客通过投机取巧的方法，将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 } = paramconst 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/>换行，实现多行的效果

Vue+elementUI-table组件-多行合计行相关推荐

vue element-ui table表格自定义纵向合计横向合计
1表格横向数据合计表格代码 <el-table-column prop="" label="合计"><template slot-scope ...
vue+elementui Table组件splice删除表格总是删除最后一行
原因是没有给table下面的row加key,才导致的问题解决方法: 在 el-table 标签里加一个 row-key 属性 <el-table :data="tableData& ...
vue elementui table组件内容换行
如表格使用render-header内容过多使用"\n 或 <br/>"换行无效 render-header 列标题 Label 区域渲染使用的 Function w ...
elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover
elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
vue+element-ui 实现table中自带合计行数据改为所有数据的总计
网上搜了好多,改的都好麻烦,也不知道是不是我没搜对,找小哥哥解决了,很简单. table中自带的合计行是对当前页所有数据进行了合计,但是当对数据进行分页之后,想要所有数据的合计就没有办法直接通过官网上 ...
【ElementUI】 table表格尾部的合计行，固定表头却不显示合计行
背景按照官网要求不固定表头,添加show-summary就可以显示合计行问题但是给table加了一个固定高度之后,就不显示了, 打开控制台可以看到这个合计是存在的那么需要做两步,合计即可出现 ...
vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开效果展示手风琴效果版本说明 "vue": "^2.6.11", " ...

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

多行合并行文字列

多行合并行内容区域列

Vue+elementUI-table组件-多行合计行相关推荐

最新文章

热门文章