勾选列表中一行数据使用vxe-grid中的:footer-method实时更新合计
时间: 2024-02-19 19:59:14 浏览: 138
您可以通过监听 `selection-change` 事件来实时更新底部合计。具体操作如下:
1. 在 `vxe-grid` 标签上添加 `@selection-change` 事件监听:
```html
<vxe-grid :data="tableData" :columns="columns" show-footer :footer-method="footerMethod" @selection-change="handleSelectionChange"></vxe-grid>
```
2. 在 `methods` 中添加 `handleSelectionChange` 方法,方法中调用 `updateFooter` 方法来更新底部合计:
```javascript
methods: {
handleSelectionChange(selectionRecords) {
// 更新底部合计
this.$refs.grid.updateFooter()
},
footerMethod(params) {
// 自定义底部合计计算方法
}
}
```
在上面的示例代码中,每当用户勾选或取消勾选一行数据时,都会触发 `selection-change` 事件,然后调用 `updateFooter` 方法更新底部合计。由于我们已经在 `footerMethod` 中定义了自定义的底部合计计算方法,所以底部合计会根据当前勾选的数据实时更新。
注意,如果您使用了 `footer-method` 属性,则 `footer-sum-method` 属性将不起作用。
阅读全文