element表格:show-summary="true"合计只合计某几列
时间: 2023-12-08 17:06:50 浏览: 159
如果你只想合计某几列,可以使用 element 表格的 `summary-method` 属性。具体操作步骤如下:
1. 在表格中定义需要合计的列,可以通过 `fixed` 属性将其固定在左侧或右侧。
2. 在表格的 `summary-method` 属性中编写一个函数,该函数接收两个参数:合计数据和当前行数据。在该函数中,将需要合计的列的值累加到合计数据中。
下面是一个简单的示例代码:
```html
<template>
<el-table :data="tableData" show-summary summary-method="getTotal">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄" fixed="left"></el-table-column>
<el-table-column prop="score" label="分数"></el-table-column>
<el-table-column prop="rank" label="排名"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, score: 80, rank: 1 },
{ name: '李四', age: 22, score: 90, rank: 2 },
{ name: '王五', age: 18, score: 70, rank: 3 },
{ name: '赵六', age: 21, score: 85, rank: 4 }
],
totalScore: 0
}
},
methods: {
getTotal({ columns, data }) {
this.totalScore = 0
columns.forEach((column, index) => {
if (index !== 0 && index !== columns.length - 1) {
data.forEach(item => {
this.totalScore += item[column.property]
})
}
})
return [
{ name: '合计', score: this.totalScore }
]
}
}
}
</script>
```
在上面的示例中,我们将表格的第二列 `age` 固定在左侧,并且只对第三列 `score` 进行合计。`summary-method` 方法中遍历需要合计的列,并将其值累加到 `totalScore` 变量中。最后返回一个包含合计数据的数组,其中 `name` 列固定为“合计”,`score` 列的值为 `totalScore` 变量的值。
阅读全文