六安找人做网站,百度搜索引擎算法,本地主机做网站,做网站服务器哪种好一、背景
需求#xff1a;在表格账单中底部添加两行固定行#xff0c;来统计当前页小计和总计。element ui 官网上是直接将本列所有数值进行求合操作的#xff0c;且只有固定一行总计。目前的需求是将接口返回的数据填充到底部固定的两行中
二、底部添加两行固定行
2.1、…一、背景
需求在表格账单中底部添加两行固定行来统计当前页小计和总计。element ui 官网上是直接将本列所有数值进行求合操作的且只有固定一行总计。目前的需求是将接口返回的数据填充到底部固定的两行中
二、底部添加两行固定行
2.1、el-table中添加show-summary并使用summary-method方法 2.2、编写getSummaries()方法函数 methods{//表尾合计与小计方法getSummaries(param){// 从参数中解构出 columns 字段const { columns } param// 用于存储小计和总计的数组const sums [];//从接口中获取的数据用于生成小计和总计的内容let tableObj {actualAmount:(p classcount-row{this.nowData ? Number(this.nowData.totalActualAmount).toFixed(2) : 0.00}br/{this.allData ? Number(this.allData.totalActualAmount).toFixed(2) : 0.00}/p),amount: (p classcount-row{ this.nowData ? Number(this.nowData.totalAmount).toFixed(2) : 0.00 }br/{ this.allData ? Number(this.allData.totalAmount).toFixed(2) : 0.00 }/p),}columns.forEach((column, index){if (index 0) {sums[index] (() {let el p classcount-row当前页小计:br/总计:/p;return el;})();return;}// 如果 column.property 存在于 tableObj 中生成相应内容if (tableObj[column.property]) {sums[index] (() {let el tableObj[column.property];// 使用 tableObj 中的内容创建元素return el;})();return;} else {sums[index] ;}})this.$nextTick(() {// 获取表格底部的单元格const tables document.querySelectorAll(#eltable .el-table__footer-wrapper trtd);tables[0].colSpan 2;// 设置第一个单元格的 colSpan 为 2tables[0].style.textAlign center;// 设置第一个单元格的文本居中对齐tables[1].style.display none;// 隐藏第二个单元格})return sums;// 返回小计和总计的数组}} 三、合计行无法正常显示数据 3.1、问题描述
此处应该正常显示底部当前页小计和总计的数据但是只看到了文字没有数据显示。当使用开发者工具调试时即窗口发生了变化表格底部会出现正常的两行数据此处显然是有bug的
3.2、问题分析
根据调试发现该问题是表格组件中给底部footer留的高度不够导致但直接给高度也没显示需要重新设置一下
3.3、解决方法
利用updated生命周期在组件更新后等待 DOM 更新完成后执行表格布局的相关操作以确保在最新的 DOM 结构上进行布局调整。 updated(){this.$nextTick(() {this.$refs[table].doLayout();})},
3.4、最终效果 最后
