Element plus 表单验证嵌套数组

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

// 元素排列 根据文档显示嵌套的字段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>

相比第一种更简单