formCreate多选下拉问题？

Question

使用formCreat下拉框组件multiple多选不生效

  return {
        type: "select",
        field: "parentId",
        value: '',
        title: t('form.parentControl'),
        // link: ['isTop'],
        props: {
            placeholder: '控件ID/控件名称',
        },
        update(e, rule, fApi) {
            formData.resetId()
            const targetRule = fApi.getRule('parentValue');
            if (targetRule) {
                targetRule.hidden = !e; // 直接根据 e 的存在与否设置 hidden 属性
            }
            if (e) {
                if (targetRule) {
                    targetRule.hidden = false;
                    targetRule.value = []
                }
                const option = formData.getFormData()
                const setFormData = (item, e) => {
                    formData.setId(e);
                    formData.setOptions(item.options);
                };
                option.find((item) => {
                    const targetField = item.children ? item.children[0].field : item.field;
                    const targetOptions = item.children ? item.children[0].options : item.options;
                    if (e === targetField) {
                        setFormData({ options: targetOptions }, e);
                        if (targetRule) {
                            targetRule.options = targetOptions
                        }
                        return true; // 找到匹配项，停止查找
                    }
                    return false;
                });
            }
        }
        // options: data
    }

我在formCreate文档中看到在props中直接添加multiple:true就可以 但是我添加后一直不生效。

Answer 1

我写个例子给你参考一下

import Vue from 'vue';
import formCreate, { maker } from '@form-create/element-ui';

const rule = [
    maker.select('产品分类', 'categories', ['104', '105'])
        .options([
            { value: '104', label: '生态蔬菜' },
            { value: '105', label: '新鲜水果' },
            { value: '106', label: '有机食品' }
        ])
        .props({ multiple: true })
];

const option = {
    submitBtn: true,
    resetBtn: true,
    onSubmit: function (formData) {
        console.log('提交的表单数据:', formData);
    }
};

new Vue({
    el: '#app',
    data() {
        return {
            formData: {}
        };
    },
    mounted() {
        this.$formCreate.create(rule, option).mount('#form');
    }
});