您的位置:首页 > 文旅 > 旅游 > el-table合计行更新问题

el-table合计行更新问题

2024/10/6 18:21:28 来源:https://blog.csdn.net/weixin_45580774/article/details/140662048  浏览:    关键词: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;},

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com