说明:在使用el-table自带的底部合计功能时,初始界面不会显示合计内容
解决方案:使用 doLayout()方法
updated() { this.$nextTick(() => { this.$refs['inventorySumTable'].doLayout(); }); }, 完整代码:
// show-summary:展示合计行 // summary-method:自定义合计方法 // ref="inventorySumTable":绑定表格 //定义合计的方法 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; }, 效果展示: