用vxe-table编写表尾求和的代码
时间: 2023-10-17 22:08:11 浏览: 42
好的,以下是用 vxe-table 编写表尾求和的代码示例:
```
<template>
<div>
<vxe-table :data="tableData" show-footer>
<vxe-column type="selection" width="60"></vxe-column>
<vxe-column field="name" title="姓名"></vxe-column>
<vxe-column field="age" title="年龄"></vxe-column>
<vxe-column field="address" title="地址"></vxe-column>
<vxe-footer>
<vxe-footer-item :colspan="3"></vxe-footer-item>
<vxe-footer-item title="总计" :label="totalAge"></vxe-footer-item>
</vxe-footer>
</vxe-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '小红', age: 18, address: '北京' },
{ name: '小明', age: 20, address: '上海' },
{ name: '小花', age: 22, address: '广州' },
{ name: '小李', age: 25, address: '深圳' }
]
}
},
computed: {
totalAge() {
return this.tableData.reduce((total, item) => total + item.age, 0)
}
}
}
</script>
```
以上示例中,使用了 vxe-table 的 show-footer 属性将表格脚部展示出来,并使用 vxe-footer-item 组件展示了总计的求和结果。在计算总数时,使用了数组的 reduce 方法来对年龄字段进行累加。