el-table show-summary属性合计莫一列
时间: 2023-10-04 13:05:02 浏览: 171
可以使用 `show-summary` 属性来开启合计功能,然后在需要合计的列上添加 `summary-method` 方法来计算合计值。以下是一个示例:
```html
<template>
<div>
<el-table :data="tableData" show-summary>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age" summary-method="sumAge"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20 },
{ name: 'Jane', age: 22 },
{ name: 'Bob', age: 25 },
],
};
},
methods: {
sumAge({ columns, data }) {
const ageColumn = columns.find((column) => column.property === 'age');
const ages = data.map((item) => item.age);
return ages.reduce((total, age) => total + age, 0);
},
},
};
</script>
```
在这个例子中,我们开启了 `show-summary` 属性并在 `age` 列上添加了 `summary-method` 方法 `sumAge`。该方法接收一个参数,其中包含了当前列的信息和数据,我们可以从中提取出 `age` 列的数据并计算它们的合计值。最后,我们将该值返回给表格以显示在合计行中。
阅读全文