public-element-ui v1.0.9

public-element-ui 项目专用的对element ui组件库进行二次封装

DynamicForm 动态表单

使用：import DynamicForm from "public-element-ui" 、、、

import 'public-element-ui/public-element-ui.css' 、、、

Vue.use(DynamicForm) 、、、

    <DynamicForm
    :classStyle="true"
    ref="formSearch"
    :formItems="formItems"
    :data="formData"
    labelWidth="100px"
    :buttonObj="buttonObj"
    @submit="handleSubmit"
    @reset="handleReset"
    @change="handleChange"
    >
        <template #imgFileList>
            <Upload
            @childFile="getFile"
            listType="picture-card"
            limitType="jpg,jpeg,png"
            acceptType=".jpg,.jpeg,.png"
            :isDisabled="false"
            :fileLimit="2"
            :limitSize="1"
            />
        </template>
    </DynamicForm>

所支持动态生成的表单项 对应的component就是elementUI的组件名称 props对应相应组件的Api.upload组件特殊处理 、、、

     const elementUI = {
            input: {
                component: "el-input",
                props: {
                    placeholder: "请输入",
                    clearable: true,
                },
            },
            inputNumber: {
                component: "el-input-number",
                props: {
                    placeholder: "请输入",
                },
            },
            textArea: {
                component: "el-input",
                props: {
                    type: "textarea",
                    placeholder: "请输入",
                    clearable: true,
                    rows: 6,
                    "show-word-limit": true,
                },
            },
            cascader: {
                component: "el-cascader",
                props: {
                    placeholder: "请输入",
                },
            },
            radioGroup: {
                component: "el-radio-group",
                props: {},
            },
            checkBoxGroup: {
                component: "el-checkbox-group",
                props: {},
            },
            select: {
                component: "el-select",
                props: {
                    style: { width: "100%" },
                    placeholder: "请选择",
                    filterable: true,
                    clearable: true,
                },
            },
            switch: {
                component: "el-switch",
                props: {},
            },
            timeSelect: {
                component: "el-time-select",
                props: { placeholder: "选择时间" },
            },
            timeRangePicker: {
                component: "el-time-picker",
                props: {
                    style: { width: "100%" },
                    "range-separator": "至",
                    "start-placeholder": "开始时间",
                    "end-placeholder": "结束时间",
                    "is-range": true,
                },
            },
            datePicker: {
                component: "el-date-picker",
                props: {
                    style: { width: "100%" },
                    type: "date",
                    placeholder: "选择日期",
                },
            },
            dateTimePicker: {
                component: "el-date-picker",
                props: {
                    style: { width: "100%" },
                    type: "datetime",
                    placeholder: "选择日期时间",
                },
            },
            dateRangePicker: {
                component: "el-date-picker",
                props: {
                    style: { width: "100%" },
                    type: "daterange",
                    "range-separator": "至",
                    "start-placeholder": "开始时间",
                    "end-placeholder": "结束时间",
                },
            },
            InputRange: {
                component: "input-range",
                props: {
                    style: { width: "100%" },
                    type: "input-range",
                    "range-separator": "至",
                    "min-placeholder": "请输入",
                    "max-placeholder": "请输入",
                },
            },
        };

formItems表单配置项 data表单绑定默认值 labelWidth表单title所占宽度 buttonObj按钮组对象 submit提交的回调 reset重置的回调 、、、

formItems配置项 、、、

type对应动态表单的对象名；label表单的title；prop表单的绑定值；component对应elementUI组件名称；props对应组件的API；span所占col的比例，可根据修改值来达到占位的目的；rules表单校验规则；relevanceProp、relevanceNoShow关联字段显示隐藏，relevanceProp值为关联的表单组件的绑定值，需要在关联的表单组件上添加relevanceNoShow:true，handleChange为控制表单显示或隐藏事件，也可以控制其他控件的值 、、、

        handleSubmit() {
            this.$refs.formSearch.validate().then((res) => {
                if (res) {
                }
            })
        },
        handleReset() {
            this.$refs.formSearch.resetFields()
        },
        handleChange(params, type, props) {
        },
        const formItems=[
            {
            type: "input",
            label: "菜单名称",
            prop: "menuName",
            component: "el-input",
            props: { placeholder: "请输入菜单名称" },
            span: 8,
            rules: [formRuleFunc("请输入菜单名称")],
        },
        {
            type: "select",
            label: "菜单名称",
            prop: "menuName1",
            component: "el-select",
            relevanceProp: "routeAddress1",
            options: [
                {
                value: "选项1",
                label: "黄金糕",
                },
                {
                value: "选项2",
                label: "双皮奶",
                },
        ],
            span: 8,
        },
        {
            type: "datePicker",
            label: "路由地址",
            prop: "routeAddress1",
            component: "el-date-picker",
            span: 8,
            relevanceNoShow: true,
        },
        {
            type: "dateTimePicker",
            label: "路由地址",
            prop: "routeAddress2",
            component: "el-date-picker",
            span: 8,
        },
        {
            type: "dateRangePicker",
            label: "路由地址",
            prop: "routeAddress3",
            component: "el-date-picker",
            span: 8,
        },
        {
            label: "icon：",
            prop: "imgFileList",
            slot: "imgFileList",
            span: 24,
            component: "el-upload",
            rules: [formRuleFunc("请上传运营位图片")],
        },
        ]
         buttonObj按钮组对象 span所占col的比例，float-right\left 展示在右侧\左侧 
        buttonObj: {
            span: 24,
            float: "right",
            buttonGroup: [
            {
                type: "primary",
                text: "查询",
                click: "submit",
            },
            {
                type: "default",
                text: "重置",
                click: "reset",
            },
            ],
        },