Element表格设置合计列并固定底部（横向滚动轴下），设置字体颜⾊element表格固定合计⾏在底部
⾃定义需要合计的项
element-ui 表格组件有合计⾏的⽅法，直接拿来⽤
属性说明类型默认值show-summary是否在表尾显⽰合计⾏Boolean false summary-method⾃定义的合
计计算⽅法Function({ columns, data })–
1. 在table上设置show-summary属性
<el-table :data="value"  show-summary :summary-method="getSummaries">
//代码只展⽰关键部分
</el-table>
2. 我只需要合计有⾦额的列，所以⾃定义了合计逻辑
// 合计⾦额
getSummaries(param) {
const { columns, data } = param;
const sums = []; //声明变量
columns.forEach((column, index) => {
if (index === 3) {
sums[index] = "合计";
//表格固定了前两列数据，合计放在第⼀列样式会错乱(暂未解决/且我的设计图就在第三列)
return;
}
const values = data.map((item) => Number(item[column.property]));
if (
column.property == "money" || column.property == "actualMoney" || column.property == "amountReceived"
//需要显⽰和合计纵列字段名，如果和我的需求⼀样可以直接copy代码，替换字段名即可
) {
sums[index] = duce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '元';
} else {
}
});
return sums;
},
固定到表格组件底部
我给表格组件⾼度做了⾃适应，经过调整后才搞成现在的效果
合计⾏⽂字设置样式
设计上要将⽂字颜⾊设置为红⾊、我⽤了row-class-name 等属性都没有实现，后来直接到标签改掉了颜⾊。
/deep/.el-table__footer-wrapper tbody td {
element表格横向滚动条color: red;
}
戎码三年，愿回⾸都是眼泪

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。