勾选列表中一行数据使用vxe-grid中的:footer-method实时更新合计
时间: 2024-02-19 16:59:14 浏览: 50
在 `vxe-grid` 中,可以使用 `footer-method` 属性来实现勾选列表中一行数据后实时更新底部合计。
首先,您需要在表格中设置 `show-footer` 属性为 `true`,并为需要计算合计的列设置 `footer-sum-method` 属性。然后,在 `footer-method` 中,可以通过 `params` 参数获取当前表格的数据和列信息,以及勾选的行数据信息。然后遍历勾选行的数据并累加需要计算合计的列的值,最后返回一个包含各列合计值的对象即可。示例代码如下:
```javascript
<template>
<vxe-grid
ref="grid"
:data="tableData"
:columns="columns"
:show-footer="true"
:footer-method="footerMethod"
></vxe-grid>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1001, name: '张三', age: 20, price: 100, quantity: 2 },
{ id: 1002, name: '李四', age: 25, price: 200, quantity: 3 },
{ id: 1003, name: '王五', age: 30, price: 300, quantity: 4 },
{ id: 1004, name: '赵六', age: 35, price: 400, quantity: 5 }
],
columns: [
{ field: 'id', title: 'ID' },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'price', title: '单价', footerSumMethod: this.sumMethod },
{ field: 'quantity', title: '数量', footerSumMethod: this.sumMethod },
{ field: 'total', title: '总价', footerSumMethod: this.sumMethod }
]
}
},
methods: {
// 自定义合计计算方法
sumMethod(params) {
const { data } = params
let result = 0
data.forEach(row => {
result += Number(row[params.column.property])
})
return result
},
// 自定义底部合计计算方法
footerMethod(params) {
const { columns, data, selectRecords } = params
const sums = {}
columns.forEach(column => {
if (column.property === 'price' || column.property === 'quantity' || column.property === 'total') {
sums[column.property] = 0
}
})
data.forEach(row => {
if (selectRecords.indexOf(row) !== -1) {
columns.forEach(column => {
if (column.property === 'price' || column.property === 'quantity') {
sums[column.property] += Number(row[column.property])
sums['total'] += Number(row['price']) * Number(row['quantity'])
}
})
}
})
return sums
}
}
}
</script>
```
在上面的示例代码中,我们为 `price` 和 `quantity` 列设置了 `footer-sum-method` 属性,并在 `footerMethod` 中遍历勾选行的数据并累加这两列的值,然后计算出合计值并返回一个对象,其中 `total` 列的值是通过 `price` 和 `quantity` 列的值计算得出的。
注意,如果您使用了 `footer-method` 属性,则 `footer-sum-method` 属性将不起作用。另外,为了使 `footer-method` 在勾选行数据后实时更新底部合计,建议使用 `select-change` 事件来监听勾选行的变化,并在事件处理函数中强制刷新表格的数据和底部合计,如下所示:
```javascript
<template>
<vxe-grid
ref="grid"
:data="tableData"
:columns="columns"
:show-footer="true"
:footer-method="footerMethod"
@select-change="handleSelectChange"
></vxe-grid>
</template>
<script>
export default {
methods: {
// 监听勾选行的变化
handleSelectChange() {
this.$refs.grid.updateFooter()
},
// 自定义底部合计计算方法
footerMethod(params) {
// ...
}
}
}
</script>
```
在 `handleSelectChange` 方法中,我们通过调用 `$refs.grid.updateFooter()` 方法来强制刷新表格的底部合计。这样,当勾选行数据发生变化时,底部合计会实时更新。