vxe-table grid 分享实现单元格编辑表格表尾合计实时计算
在使用 vxe-grid 时,需要实现表尾合计功能,通过单元格编辑之后,实时自动计算表尾合计的值,自动更新表尾合计数据,实现方式通过监听change 事件,从而实现实时更新合计功能。
可以使用插槽模板,也可以使用配置式,下面是配置式的用法:
<template>
<div>
<vxe-button status="primary" @click="insertEvent">新增</vxe-button>
<vxe-grid ref="gridRef" v-bind="gridOptions">
<template #action="{ row }">
<vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
</template>
</vxe-grid>
</div>
</template>
<script>
import { VxeUI } from 'vxe-pc-ui'
const meanNum = (list, field) => {
let count = 0
list.forEach(item => {
count += Number(item[field])
})
return (count / list.length).toFixed(2)
}
const sumNum = (list, field) => {
let count = 0
list.forEach(item => {
count += Number(item[field])
})
return count.toFixed(2)
}
export default {
data () {
const gridOptions = {
border: true,
showOverflow: true,
showFooter: true,
height: 400,
editConfig: {
trigger: 'click',
mode: 'row'
},
columns: [],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', age: 10, num: 28, rate: 5, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', age: 34, num: 22, rate: 4, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', age: 56, num: 32, rate: 3, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', age: 45, num: 24, rate: 1, address: 'Shanghai' },
{ id: 10005, name: 'Test5', role: 'PM', age: 56, num: 32, rate: 4, address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', age: 45, num: 24, rate: 1, address: 'Shanghai' }
],
footerData: []
}
const meanObj = {
seq: '平均',
name: '-',
age: '',
rate: '',
num: ''
}
const sumNObj = {
seq: '和值',
name: '-',
age: '',
rate: '',
num: ''
}
return {
gridOptions,
meanObj,
sumNObj
}
},
created () {
const ageEditRender = {
name: 'VxeNumberInput',
props: {
type: 'integer',
min: 1,
max: 120
},
events: {
change: this.updateFootEvent
}
}
const numEditRender = {
name: 'VxeNumberInput',
events: {
change: this.updateFootEvent
}
}
const rateEditRender = {
name: 'VxeNumberInput',
events: {
change: this.updateFootEvent
}
}
this.gridOptions.columns = [
{ field: 'seq', type: 'seq', width: 60 },
{
title: '统计信息',
children: [
{ field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },
{ field: 'age', title: 'Age', editRender: ageEditRender },
{ field: 'num', title: 'Num', editRender: numEditRender },
{ field: 'rate', title: 'Rate', editRender: rateEditRender }
]
},
{ title: '操作', width: 100, slots: { default: 'action' } }
]
this.gridOptions.footerData = [
this.meanObj,
this.sumNObj
]
this.updateFootCount(this.gridOptions.data)
},
methods: {
async insertEvent () {
const record = {
name: 'New name'
}
const $grid = this.$refs.gridRef
if ($grid) {
const { row: newRow } = await $grid.insert(record)
$grid.setEditCell(newRow, 'age')
}
},
async removeRow (row) {
const $grid = this.$refs.gridRef
if ($grid) {
const type = await VxeUI.modal.confirm('您确定要删除该数据?')
if (type === 'confirm') {
await $grid.remove(row)
this.updateFootEvent()
}
}
},
updateFootCount (list = []) {
this.meanObj.age = meanNum(list, 'age')
this.meanObj.num = meanNum(list, 'num')
this.meanObj.rate = meanNum(list, 'rate')
this.sumNObj.age = sumNum(list, 'age')
this.sumNObj.num = sumNum(list, 'num')
this.sumNObj.rate = sumNum(list, 'rate')
},
// 在值发生改变时更新表尾合计
updateFootEvent () {
const $grid = this.$refs.gridRef
if ($grid) {
const { visibleData } = $grid.getTableData()
this.updateFootCount(visibleData)
}
}
}
}
</script>
分类:
vxe-table
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章