element-ui table表格底部合计自定义配置过程
作者：痴心阿文
这篇文章主要介绍了element-ui table表格底部合计自定义配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element-ui table表格底部合计自定义配置
【element-ui】
table表格底部合计自定义配置，最近做管理系统用到饿了么UI，用到了table表格合计需求，常用的table底部，有时候不是所有内容都需要合计，比如上图这个编号是数字，但是不需要合计计算处理的，这时候就需要用到自定义表格，把不需要合计的内容隐藏掉
效果如下：
方法写在下面：
带合计的表格设置
1.参数 show-summary
2. 方法 :summary-method="getSummaries"
<!--带合计的表格设置-->
<el-table :data="infolist" border show-summary style="width: 100%;"
@selection-change="selectionChangeHandleMateria" max-height="450" :summary-method="getSummaries">
<el-table-column type="selection" align="center" header-align="center" width="50"></el-table-column>
<el-table-column prop="short_name" header-align="center" label="简称" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="goods_code" header-align="center" label="商品编码" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="goods_name" header-align="center" label="商品名称" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="goods_spec" header-align="center" label="规格" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="water_quantity" header-align="center" label="水份含量(%)" align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="material_quantity" header-align="center" label="原料重量(kg)" align="center"
show-overflow-tooltip>
<template slot-scope="scope">
<el-input v-model="scope.row.material_quantity" placeholder="请输入数量"></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="200" label="操作"
show-overflow-tooltip>
<template slot-scope="scope">
<i class="icon-btn el-icon-delete" @click.stop="deleteInfo(scope.row)"></i>
</template>
</el-table-column>
</el-table>自定义方法 getSummaries
//自定义方法
getSummaries(param) {
const { columns, data } = param;
const sums = {};
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
// if (index === 3) {
// sums[index] = '';
// return;
// }
const values = data.map(item => Number(item[column.property]));
if (column.label == "水份含量(%)" || column.label == "原料重量(kg)") {
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] += ' kg';
} else {
// sums[index] = 'N/A';
}
}
});
return sums;
},最后关于表格底部样式问题
官方默认合计行在表格尾部展示，以下为更改合计行的位置，放表格的首行位置
通过css实现可以加以下代码：
// /deep/ 为深度操作符，可以穿透到子组件
/deep/ .el-table {
display: flex;
flex-direction: column;
}
// order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方
/deep/ .el-table__body-wrapper {
order: 1;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。