vue使用elementui表格el-table组件指定某列不进行合计
vue使用elementui表格el-table组件指定某列不进行合计使用步骤效果图1.添加表格自定义合计api— show-summary和summary-method代码如下(示例):<el-table:data="tableDataOfRight"style="width: 100%":height="rightHeight"size="medium "hig
·
vue使用elementui表格el-table组件指定某列不进行合计
使用步骤
效果图
1.添加表格自定义合计api— show-summary 和 summary-method
代码如下(示例):
<el-table
:data="tableDataOfRight"
style="width: 100%"
:height="rightHeight"
size="medium "
highlight-current-row
border
show-summary
:summary-method="totalOutPrice"
>
2.通用summary-method方法,直接拷贝使用需自行修改不进行合计列的字段
代码如下(示例):
price 是第一列的绑定字段
totalOutPrice(param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (column.property != 'price') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
}
});
return sums
},
更多推荐
已为社区贡献6条内容
所有评论(0)