perf: 增加formWatch示例

fast-crud · Dec 6, 2023 · ca5910b · ca5910b
1 parent 07802cc
commit ca5910b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/docs/zh/api/crud-options/form.md b/docs/zh/api/crud-options/form.md
@@ -180,6 +180,22 @@ const crudOptions = {
 * 注意：仅在独立使用表单组件时有效，fs-crud中会被行数据代替，你可以在字段中配置columns.key.form.value=默认值
 * 类型：Object
 
+
+## watch
+* 说明: 表单数据监听,可以做实时计算
+* 类型：`(context:FormScopeContext)=>void`
+* 示例：
+```js
+const crudOptions = {
+    form:{
+        watch({form}){
+            //实时计算c=a+b
+            form.c=form.a+form.b
+        }
+    }
+}
+```
+
 ## beforeSubmit
 * 说明: 表单提交前触发，，返回false或抛异常即可中止提交
 * 类型：`async (context)=>void`

diff --git a/packages/fast-crud/src/components/crud/fs-form.vue b/packages/fast-crud/src/components/crud/fs-form.vue
@@ -237,9 +237,14 @@ export default defineComponent({
      */
     helper: {
       type: Object
+    },
+
+    watch: {
+      type: Function,
+      default: null
     }
   },
-  emits: ["reset", "submit", "success", "validationError", "value-change"],
+  emits: ["reset", "submit", "success", "validationError", "value-change", "init"],
   setup(props, ctx) {
     const { merge } = useMerge();
     const { ui } = useUi();
@@ -584,6 +589,25 @@ export default defineComponent({
       return false;
     }
 
+    if (props.watch) {
+      watch(
+        () => {
+          return form;
+        },
+        (newVal, oldVal) => {
+          if (props.watch) {
+            props.watch(scope.value);
+          }
+        },
+        {
+          deep: true,
+          immediate: true
+        }
+      );
+    }
+
+    ctx.emit("init", scope.value);
+
     return {
       get: (form: any, key: string) => {
         return _.get(form, key);