vxe-grid中的:footer-method方法只统计勾选的数据代码例子
时间: 2024-02-19 11:59:33 浏览: 126
下面是一个例子,演示如何在 `footer-method` 方法中只统计勾选的数据:
```html
<template>
<vxe-grid :data="tableData" :columns="columns" :footer-method="footerMethod"></vxe-grid>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 25, score: 80, isSelected: false },
{ id: 2, name: 'Mike', age: 30, score: 90, isSelected: false },
{ id: 3, name: 'Alice', age: 28, score: 85, isSelected: false }
],
columns: [
{ field: 'name', title: 'Name' },
{ field: 'age', title: 'Age' },
{ field: 'score', title: 'Score' }
]
};
},
methods: {
footerMethod({ columns, data }) {
let totalScore = 0;
data.forEach(row => {
if (row.isSelected) {
totalScore += row.score;
}
});
return columns.map(column => {
if (column.property === 'score') {
return `Total: ${totalScore}`;
}
return '';
});
}
}
};
</script>
```
在这个例子中,我们在表格数据中添加了一个 `isSelected` 属性,用于标识每一行是否被勾选。在 `footerMethod` 方法中,我们遍历数据,只对被勾选的行进行 `score` 列的汇总统计,并返回一个包含合计信息的数组。在表格底部,会显示 `Total: 175`,即勾选的行的 `score` 列的合计值。
阅读全文