Element plus 表单验证嵌套数组

在网上找到的都是以前版本的或者不能用的,现在整理一下可用的

// 元素排列 根据文档显示嵌套的字段prop 应为字符串数组
 
        
         
  

// 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'
                                }]
                            }
                        }
                    },
                ]
            })

上面是能做到验证了但是有明显的的缺点就是,整体标红,并且只能对整体验证信息提示

这次我们修改一下,做到具体到单个项验证及提示

        
         

相比第一种更简单

你可能感兴趣的:(vue,elementui,vue.js,前端)