vxe-table grid 分享实现单元格编辑表格表尾合计实时计算

  • vxe-table grid 分享实现单元格编辑表格表尾合计实时计算已关闭评论
  • 22 次浏览
  • A+
所属分类:Web前端
摘要

在使用 vxe-grid 时,需要实现表尾合计功能,通过单元格编辑之后,实时自动计算表尾合计的值,自动更新表尾合计数据,实现方式通过监听change 事件,从而实现实时更新合计功能。

在使用 vxe-grid 时,需要实现表尾合计功能,通过单元格编辑之后,实时自动计算表尾合计的值,自动更新表尾合计数据,实现方式通过监听change 事件,从而实现实时更新合计功能。

官网:https://vxetable.cn

vxe-table grid 分享实现单元格编辑表格表尾合计实时计算

可以使用插槽模板,也可以使用配置式,下面是配置式的用法:

<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> 

https://gitee.com/xuliangzhan/vxe-table