使用vxe-grid调用:footer-method函数如何实时统计勾选的合计数
时间: 2024-02-18 15:04:17 浏览: 95
不写代码DatagridView带有统计合计功能
3星 · 编辑精心推荐
要实时统计勾选的合计数,可以在footer-method函数中使用vxe-grid组件提供的API实现。具体步骤如下:
1. 在vxe-grid中设置checkbox-config属性,开启多选框功能:
```
<vxe-grid :data="tableData" :checkbox-config="{range:true}">
...
</vxe-grid>
```
2. 在footer-method函数中使用vxe-grid组件提供的API获取选中行的数据,然后计算合计数:
```
<vxe-grid :data="tableData" :checkbox-config="{range:true}" :footer-method="getFooterData">
...
</vxe-grid>
...
methods: {
getFooterData: function (params) {
// 获取选中行的数据
var selectData = this.$refs.grid.getSelectedRecords();
// 计算合计数
var total = 0;
selectData.forEach(function (item) {
total += item.number;
});
// 返回合计数
return [
{number: total}
];
}
}
```
这样就可以实时统计勾选的合计数了。注意,要通过$refs属性获取vxe-grid组件的实例,然后调用getSelectedRecords方法获取选中行的数据。
阅读全文