el-table合计行更新问题

说明:在使用el-table自带的底部合计功能时,初始界面不会显示合计内容

解决方案:使用 doLayout()方法

bash 复制代码
updated() {
		this.$nextTick(() => {
			this.$refs['inventorySumTable'].doLayout();
		});
	},

完整代码:

bash 复制代码
 // show-summary:展示合计行
 // summary-method:自定义合计方法
 // ref="inventorySumTable":绑定表格
            <el-table
				border
				height="100%"
				:data="tableList"
				v-loading="tableLoading"
				show-summary
				:summary-method="getSummaries"
				ref="inventorySumTable"
				:cell-style="changeCellStyle"
			>
				<el-table-column
					label="序号"
					prop="index"
					type="index"
					width="55"
					align="center"
					header-align="center"
				></el-table-column>
				<el-table-column
					label="使用单位(科室)"
					prop="useDept"
					align="center"
					header-align="center"
					show-overflow-tooltip
				></el-table-column>
				<el-table-column
					label="资产分类"
					prop="typeName"
					align="center"
					header-align="center"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
					label="折旧合计"
					prop="sumDepreciation"
					align="center"
					header-align="center"
					show-overflow-tooltip
				></el-table-column>
			</el-table>



//定义合计的方法
        getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				}
				const values = data.map(item => Number(item[column.property]));
				if (
					!values.every(value => {
						return isNaN(value);
					})
				) {
					console.log(sums, column.property, 226);
					if (column.property == 'sumDepreciation') {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
					}
					if (column.property == 'sumDepreciation') {
						return (sums[index] = this.formatePrice(sums[index]));
					}
				} else {
					sums[index] = '';
				}
			});

			return sums;
		},

效果展示:

相关推荐
jktantan16 分钟前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么40 分钟前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
前端精髓2 小时前
调用openrouter的免费API模型
java·前端·javascript
开开心心_Every2 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
chenbingjie_c2 小时前
C++ 多态完全指南:从虚函数重写到虚函数表原理
开发语言·c++
吴卫斌2 小时前
定投ETF实战指南(四):行业/主题ETF——定投的“进攻端“
开发语言·python·股票·量化
超级架构师4 小时前
PRAXO-CORE 2.5.0:用 conformance 和显式边界构建 Go Agent 框架
开发语言·人工智能·后端·golang·ai编程·智能体框架·praxo-core
叼烟扛炮4 小时前
Linux 学习笔记(四十三):网络编程进阶——自定义协议解决 TCP 粘包与守护进程
linux·开发语言·网络·笔记·tcp/ip
LMT流氓兔5 小时前
第五单元——第十六课:给书店助手加上网页界面
java·开发语言·jvm·人工智能·oracle·langchain·1024程序员节
专注仿真5 小时前
梯度提升类(XFBoost)算法详解与代码实例
开发语言·人工智能·python·算法·大模型训练·控制算法