当前位置: 首页 > news >正文

el-table合计行更新问题

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

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

updated() {this.$nextTick(() => {this.$refs['inventorySumTable'].doLayout();});},

完整代码:

 // show-summary:展示合计行// summary-method:自定义合计方法// ref="inventorySumTable":绑定表格<el-tableborderheight="100%":data="tableList"v-loading="tableLoading"show-summary:summary-method="getSummaries"ref="inventorySumTable":cell-style="changeCellStyle"><el-table-columnlabel="序号"prop="index"type="index"width="55"align="center"header-align="center"></el-table-column><el-table-columnlabel="使用单位(科室)"prop="useDept"align="center"header-align="center"show-overflow-tooltip></el-table-column><el-table-columnlabel="资产分类"prop="typeName"align="center"header-align="center"show-overflow-tooltip></el-table-column><el-table-columnlabel="折旧合计"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;},

效果展示:
在这里插入图片描述

http://www.lryc.cn/news/408566.html

相关文章:

  • ChatGPT:数据库不符合第二范式示例
  • 27、美国国家冰雪中心(NSIDC)海冰密集度月数据下载与处理
  • vite环境下使用bootstrap
  • Laravel视图渲染封装
  • C++学习补充2:MySQL select 查询
  • uni-app声生命周期
  • 排序算法--堆排序
  • iPhone 在 App Store 中推出的 PC 模拟器 UTM SE
  • FastAPI删除mongodb重复数据(数据清洗)
  • 移动UI:排行榜单页面如何设计,从这五点入手,附示例。
  • 如何解决 uni-app 项目中 “文件查找失败:‘crypto-js‘“ 的问题
  • Apache DolphinScheduler 3.2.2 版本正式发布!
  • 汇川CodeSysPLC教程03-2-6 ModBus TCP
  • 【Python机器学习】决策树的构造——划分数据集
  • Pip换源使用帮助
  • 力扣1089复写0
  • 10 VUE Element
  • 独立游戏《星尘异变》UE5 C++程序开发日志8——实现敏感词过滤功能(AC自动机)
  • 使用 Swagger 在 Golang 中进行 API 文档生成
  • Pip换源实战指南:加速你的Python开发
  • 【数据结构】常用数据结构的介绍:理解与应用
  • 【优秀python系统毕设】基于Python flask的气象数据可视化系统设计与实现,有LSTM算法预测气温
  • 【康复学习--LeetCode每日一题】2951. 找出峰值
  • PYTHON学习笔记(八、字符串及的使用)
  • 文件共享功能无法使用提示错误代码0x80004005【笔记】
  • FTP(File Transfer Protocal,文件传输协议)
  • DevEco Studio中使用Qt,编写HarmonyOS程序
  • 基于单文档的MFC图像增强
  • 云计算实训13——DNS域名解析、ntp时间服务器配置、主从DNS配置、多区域DNS搭建
  • 【C#】Visual Studio2022打包依赖第三方库的winForm程序为exe