VxeTable 实现表尾合计行并支持数据及时统计

在背景管理体系中，表格合计行（如统计总分、总年事等）好坏常常见的需求。VxeTable 提供了机动的定制本事，通过自界说表尾（footer）共同事故监听，可以轻松实现合计行的动态更新。本文将以 vxe-grid 组件为例，演示怎样在数据编辑、粘贴等操纵后，及时革新表尾的合计数据。
实现步调

• 开启表尾表现：通过 showFooter: true 让表格底部表现自界说行。
  
• 界说合计数据对象：在 footerData 中放置一个相应式对象，内容与表格列布局对齐。
  
• 监听数据变动事故：
  
  
  
  • edit-closed：单元格编辑竣事（无论是确认照旧取消）后触发。
    
  • cell-area-paste：地区粘贴完成后触发。
    
  
  
• 封装合计盘算方法：遍历表格 data，累加指定命值字段，更新到合计对象中。
  
• 初始化时盘算一次：页面渲染后立刻调用合计方法，包管初始数据正确。
  

代码

表尾表现合计行，包罗“合计”标识及数值列的汇总结果。
支持单元格编辑（双击激活），编辑完成后主动重新盘算合计。
支持地区选取与粘贴，粘贴完成后主动重新盘算合计。

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions" v-on="gridEvents"></vxe-grid>
4.   
5. </template>

复制代码

阐明

相应式的对象

sumNObj 使用 reactive 包裹，而且直接赋值给 footerData。当合计对象的属性发生厘革时，表尾会主动重新渲染。
事故选择

• edit-closed 比 cell-edit 更稳固，由于它会在编辑完全竣过后触发（包罗取消编辑的情况，但取消不改变数据，合计无影响）。
  
• cell-area-paste 覆盖了粘贴操纵，确保批量修改数据后合计也是正确的。
  假如必要更全面的覆盖（如删除行、拖拽添补等），可根据业务需求增补相应事故（比方 checkbox-change、delete-row）。
  

https://vxetable.cn

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.