VUE中求el-table列表指定列的和
时间: 2023-11-01 09:07:40 浏览: 50
要求一个 `el-table` 列表指定列的和,可以使用 `el-table` 的 `sumText` 和 `summary-method` 属性来实现。
`sumText` 可以用来指定列表尾部显示的文本,一般用来提示该列的统计信息;`summary-method` 可以用来计算列表的统计信息,需要返回一个对象,对象的 key 为 `prop`,value 为该列的统计值。
以下是示例代码:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="score" label="成绩" :sum-text="sumText" :summary-method="getSum"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, score: 90 },
{ name: '李四', age: 22, score: 85 },
{ name: '王五', age: 23, score: 95 },
],
}
},
methods: {
sumText(param) {
return `总分:${param.sum}`
},
getSum(column) {
return this.tableData.reduce((acc, cur) => acc + cur[column.prop], 0)
},
},
}
</script>
```
在上面的代码中,我们给成绩列添加了 `sumText` 和 `summary-method` 属性,`sumText` 的值为 `总分:${param.sum}`,表示将会在列表尾部显示 `总分:` 和该列的总和;`summary-method` 的值为 `getSum`,表示使用 `getSum` 方法来计算该列的总和。
`getSum` 方法接收一个参数 `column`,表示当前列的信息,我们使用 `reduce` 方法来计算该列的总和,最终将计算结果作为一个对象返回,对象的 key 为 `prop`,value 为该列的总和。
在模板中,我们可以通过 `{{ sumText }}` 来获取对应列的总和。