Vue+element - ui 自定义动态表单带校验

Vue+element - ui 自定义动态表单带校验

// 父组件
 

父组件对应的数据

formData: {
                    dataName: "",
                    formItemList: [
                        {
                            label: '名称', // lable名称
                            disabled: false, // 禁止编辑
                            defaultValue: '', //默认值
                            itemId: 'dataName', // 绑定的name属性
                            required: true, // 是否必填
                            placeholder: '请填写正确的信息', // 默认灰色提示文本
                            width: 300, // 文本框宽度
                            type: 'INPUT', // 表单类型
                            message: '请填写正确的信息', // 如果未填写，提示用户的信息
                            value: '11', // 绑定的值
                            defDataList: [] // 如果是select活着tree需要绑定的数组值
                        },
                        {
                            label: 'select', // lable名称
                            disabled: false, // 禁止编辑
                            defaultValue: '', //默认值
                            itemId: 'select222', // 绑定的name属性
                            required: true, // 是否必填
                            placeholder: '请选择', // 默认灰色提示文本
                            width: 300, // 文本框宽度
                            type: 'SELECT', // 表单类型
                            filterable: false, // 是否可搜索
                            multiple: false, // 是否可多选
                            message: '', // 如果未填写，提示用户的信息
                            keyLabel: 'label',
                            keyValue: 'value',
                            value: '', // 绑定的值 // multiple 为多选的时候这里是数组，
                            defDataList: [
                                {
                                    label: '选型1',
                                    value: 1
                                },
                                {
                                    label: '选型2',
                                    value: 2
                                }
                            ]
                        },
                        {
                            format: "YYYY-MM-DD",
                            label: 'DATE', // lable名称
                            disabled: false, // 禁止编辑
                            defaultValue: '', //默认值
                            itemId: 'DATEDATE', // 绑定的name属性
                            required: true, // 是否必填
                            placeholder: '', // 默认灰色提示文本
                            width: 300, // 文本框宽度
                            type: 'DATE', // 表单类型
                            message: '请填写正确的信息', // 如果未填写，提示用户的信息
                            value: '', // 绑定的值
                            defDataList: [] // 如果是select活着tree需要绑定的数组值
                        },
                        {
                            label: 'TEXTAREA', // lable名称
                            disabled: false, // 禁止编辑
                            defaultValue: '', //默认值
                            itemId: 'textarea', // 绑定的name属性
                            required: false, // 是否必填
                            placeholder: '', // 默认灰色提示文本
                            width: 300, // 文本框宽度
                            type: 'TEXTAREA', // 表单类型
                            message: '请填写正确的信息', // 如果未填写，提示用户的信息
                            value: '', // 绑定的值
                            defDataList: [] // 如果是select活着tree需要绑定的数组值
                        },
                        {
                            label: 'AllDATE', // lable名称
                            type: 'ALLDATE', // 表单类型
                            message: '请选择日期', // 如果未填写，提示用户的信息
                            disabled: false, // 禁止编辑
                            defaultValue: '', //默认值
                            itemId: 'allDATE', // 绑定的name属性
                            required: true, // 是否必填
                            placeholder: '', // 默认灰色提示文本
                            width: 300, // 文本框宽度
                            value: ['2012-09-11', '2012-09-18'], // 默认的绑定的区间是个数组
                            defDataList: [] // 如果是select活着tree需要绑定的数组值
                        }
                    ]
                }

子组件