vue-form-j v1.0.0

vue-form-j

基于 element-ui 和 vue 的 form 表单配置生成

npm i -S vue-form-j

例子

<template>
    <FormJ :form-data="formData" v-model="mode"></FormJ>
</template>

<script>
import FormJ from "form-j";

export default {
    components: {
        FormJ
    },
    data() {
        return {
            formData: [
                {
                    title: "输入框1",
                    require: true,
                    ragName: "plugin-input",
                    data: {
                        key: "input"
                    }
                },
                {
                    title: "时间选择器",
                    require: true,
                    ragName: "plugin-date-select",
                    data: {
                        key: "dateSelect",
                        num: 2,
                        type: "date-time"
                    }
                },
                {
                    ragName: "plugin-container",
                    inline: true,
                    children: [
                        {
                            title: "输入框",
                            require: true,
                            ragName: "plugin-input",
                            data: {
                                key: "input1",
                                placeholder: "请输入"
                            },
                            format(mode) {}
                        },
                        {
                            title: "时间选择器",
                            require: true,
                            ragName: "plugin-date-select",
                            data: {
                                key: "dateSelect1",
                                num: 2,
                                type: "date-time"
                            }
                        },
                        {
                            title: "下拉框",
                            require: true,
                            ragName: "plugin-select",
                            compute(mode) {
                                return {
                                    key: "select",
                                    children: [
                                        { label: "1", value: "1" },
                                        { label: " 2", value: "2" }
                                    ]
                                };
                            }
                        }
                    ]
                }
            ],
            mode: {}
        };
    }
};
</script>

返回结果

mode: {
    input: '',
    dateSelect: '',
    input: '',
    dateSelect: '',
    select: ''
}