企业官网建设流程全解析

📝 前言

后台管理系统的开发中，主子表联动是非常常见的业务场景。例如在销售订单中，当我们在子表（明细表）中修改某项金额或删除某一行时，主表的“总金额”和“欠款金额”需要实时自动计算并更新。

本文将基于 JVxeTable 组件，分享如何通过监听子表事件，实现子表数据变更自动触发主表字段计算的完整方案。

🎯 核心思路

1. 监听子表事件：利用 JVxeTable 提供的 valueChange（值改变）和 removed（行删除）事件。
2. 获取最新数据：在事件触发时，通过 ref 调用子表的 getTableData() 方法获取实时数据。
3. 计算并回写主表：对子表数据进行 reduce 求和，然后调用主表表单的 setFieldsValue 方法更新对应字段。

💻 完整代码实现

1. 子表组件配置

在子表 JVxeTable 上绑定 @valueChange 和 @removed 事件，统一指向计算方法 getTableData。

<template> <JVxeTable keep-source resizable ref="salesOrderAccount" :loading="s