docs: 修正二开文档关于自定义字段的部分，补充onchange事件

2024-06-12 17:48:44 +08:00
parent 76a2203237
commit dcc331236e
2 changed files with 88 additions and 78 deletions
--- a/docs/表单二开/5_自定义表单字段.md
+++ b/docs/表单二开/5_自定义表单字段.md
@ -0,0 +1,66 @@
+# 如何在表单二开中定义字段
+首先，需要按照文档**1_拆分表单**将表单拆开，分解成独立字段。
+
+下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：
+```vue
+<!-- 非SimpleFormItem的组件需要自己包一层FormItem才有标准表单样式 -->
+<FormItem :labelCol="{ style: { width: '120px' } }" label="级联本体" name="jiLianBenTi7352">
+    <!-- 实际存储值的是a-input，因为取值是校验方法的返回值，非antd表单组件无法取到值 -->
+    <a-input v-model:value="formModel.jiLianBenTi7352" style="display: none"/>
+    <!-- 当一个formitem里有多个表单字段时，不需要取值的用form-item-rest包起来 -->
+    <a-form-item-rest>
+        <a-cascader v-model:value="cascadeValue" :load-data="onCascadeLoad" :options="cascadeData" placeholder="请选择" @change="onCascadeChange">
+            <!-- 这里是选择器的触发链接，如果已经有选择值了，就显示中文结果 -->
+            <!-- 就算是没有加载选项部分，因为文字部分已经存库了，已选内容也不为空 -->
+            <a href="#">{{ formModel.jiLianWenZi5194 || '请选择' }}</a>
+        </a-cascader>
+    </a-form-item-rest>
+</FormItem>
+```
+这里特别注意下，因为cascade的值为数组，而数组在数据库是不能存储的，所以这里cascadeValue为数组值，a-input里存储的为逗号分开的id。
+
+特别注意，FormItem在本框架里获取值依靠form的validate方法，因此FormItem里必须有**antd vue的表单元素**，如果为纯手动开发的组件，建议用一个a-input储存表单值。
+
+脚本部分
+```vue
+<script>
+export default {
+    setup(props, ctx) {
+        // 参考表单拆分，这里省略
+    },
+    mounted() {
+        this.getCascadeData();
+    },
+    methods: {
+        getCascadeData: function (parent = {}) {
+            defHttp
+                .get({
+                    url: '/system/dev-demo/cascade-data',
+                    params: {
+                        level: parent.level
+                    }
+                })
+                .then((data) => {
+                    if (!parent.level) {
+                        this.cascadeData = data;
+                    } else {
+                        parent.children = data;
+                    }
+                });
+        },
+
+        onCascadeChange: function (value, selectedOptions) {
+            // 将级联选择器的文字和值分别赋值到2个字段保存
+            this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
+            this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
+        },
+
+        onCascadeLoad: function (selectedOptions) {
+            // 具体参考官方文档，级联选择器的返回值为一组数组，所以要取最后一级的值，以加载下一层选项
+            const targetOption = selectedOptions[selectedOptions.length - 1];
+            this.getCascadeData(targetOption);
+        }
+    }
+};
+</script>
+```