如何在表单二开中定义字段

首先，需要按照文档1_拆分表单将表单拆开，分解成独立字段。

下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：

<!-- 非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储存表单值。

脚本部分

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

3.0 KiB Raw Blame History Unescape Escape

如何在表单二开中定义字段

3.0 KiB

Raw Blame History