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需要绑定的数组值
}
]
}
子组件