template代码:
<el-table
:data="tableData"
:height="460"
ref="table"
:cell-style="cellStyle"
border
show-summary
:summary-method="getSummaries"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" :width="$TW.sn" fixed>
<template slot-scope="scope">
<span>{{(pageNoCode - 1) * pageSizeCode + scope.$index + 1}}</span>
</template>
</el-table-column>
<template v-for="(table, index) in tableTheadOptions">
<el-table-column
:fixed="table.fixed || false"
:key="index"
:type="table.type"
:label="table.label"
:min-width="table.width"
:prop="table.prop"
:align="table.align || 'left'"
:header-align="table.headerAlign || 'left'"
show-overflow-tooltip
>
<template slot-scope="scope">
<template v-if="table.prop === 'totalMeasurementAmount'">
<div>
{{
moneyWithZeroes(
scope.row.totalMeasurementAmount,
Accuracy.amountViewDecimalPlace
) || " "
}}
</div>
</template>
<template v-else>{{ scope.row[table.prop] }}</template>
</template>
</el-table-column>
</template>
</el-table>
javaScript: 正常table
getSummaries(param) {
//此处打印param可以看到有两项,一项是columns,一项是data,最后一列可以通过columns.length获取到。
const { columns, data } = param;
const len = columns.length;
const sums = [];
columns.forEach((column, index) => {
//如果是第一列,则最后一行展示为“总计”两个字
if (index === 0) {
sums[index] = "合计";
//如果是最后一列,索引为列数-1,则显示计算总和
//如果是多列计算 可以用逻辑运算符 || index == 1 || index == 2
} else if (index === len - 2) {
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] = sums[index].toFixed(
this.Accuracy.amountViewDecimalPlace
);
} else {
sums[index] = "N/A";
}
//如果是除了第一列和最后一列的其他列,则显示为空
} else {
sums[index] = "";
}
});
return sums;
},
javaScript:树形table
getSum(tree, idx, sums, index) {
if (tree && tree.length > 0) {
tree.map(item => {
this.getSum(item.children, idx, sums, index);
sums[index] += Number(item[idx]);
});
}
},
getSummaries(param) {
const { columns, data } = param;
const len = columns.length;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "合计";
} else if (index === len - 1 || index === len - 3) {
sums[index] = 0;
this.getSum(data, column.property, sums, index);
} else {
sums[index] = "";
}
});
return sums;
},
问题:Element的el-table组件在设置表格高度heoght 同时 开启合计行show-summary ,项目中合计这一列不显示,但是缩放下页面或者稍微修改下F12里dom中的东西就又显示了
方法一:修改el-table样式
.el-table{
overflow:visible !important;
}
方法二:添加updated生命周期 对Table重新布局
updated() {
this.$nextTick(() => {
this.$refs.table.doLayout();
});
},