在网上找到的都是以前版本的或者不能用的,现在整理一下可用的
// 元素排列 根据文档显示嵌套的字段prop 应为字符串数组
<el-form-item prop="split">
<el-form-item :prop=`['split',${index},'product_id']`>
</el-form-item>
</el-form-item>
// form 字段
const form = reactive({
id:1,
....
split:[
{
product_id:0
}
]
})
// rule 定义
const rules = reactive({
split:[
{
type:'array',
required: true,
message: '请添加拆分单',
min:1,
defaultField: {
type: "object",
required: true,
// message: '',
fields: {
product_id: [{
type: 'string',
required: true,
message:'请选择产品',
trigger: 'change'
}],
price: [{
type: 'number',
required: true,
message:'请填写价格',
trigger: 'blur'
}],
signatory_id: [{
type: 'string',
required: true,
message:'请选择负责人',
trigger: 'change'
}],
renew_user_id: [{
type: 'string',
required: true,
message:'请选择联系人人',
trigger: 'change'
}]
}
}
},
]
})
上面是能做到验证了但是有明显的的缺点就是,整体标红,并且只能对整体验证信息提示
这次我们修改一下,做到具体到单个项验证及提示
<el-form-item
:prop="`split.${index}.product_id`"
:rules="{required: true, message: '请填写信息', trigger: 'blur'}"
>
</el-form-item>
相比第一种更简单