问题
在配置了 el-table 组件的合计行后，由于elementUI 表格el-table设置高度之后，合计行功能不会显示
解决方法：
- 根据调试，发现该问题应该属于组件bug，表格主体中给
footer留的高度不够导致，重新设置即可。- 添加生命周期钩子
updated，对table组件重新布局即可解决问题。具体如下：
Vue 文件配置演示：
<el-table
show-summary
ref="table"
:data="dataList"
:height="tableHeight"
:summary-method="getSummaries"
>
测试数据 dataList 自行配置：
export default {
data() {
return {
dataList: [],
tableHeight: "400px"
}
},
updated() {
this.$nextTick(() => {
this.$refs.table.doLayout()
})
}
methods: {
getSummaries(param) {
const {
columns, data } = param;
console.log("--------------------- column ",columns)
console.log("--------------------- data ",data)
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 => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
}
}