question
After configuring the total row of the el-table component, the total row function will not be displayed because the height of the elementUI table el-table is set.
Solution:
- According to debugging, it was found that the problem should be a component bug,
footercaused by insufficient height left in the main body of the form, and it can be reset.- Adding life cycle hooks
updatedandtablerearranging components can solve the problem. details as follows:
Vue file configuration demo:
<el-table
show-summary
ref="table"
:data="dataList"
:height="tableHeight"
:summary-method="getSummaries"
>
Test data dataListconfigured by yourself:
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;
}
}
}