element form表单循环校验(动态绑定的数据)

一层循环嵌套时


  
    
  

 data数据结构及校验规则

data() {
    return {
        addform: {
            resourceList: [{
                name: ''
            }]
        },
        rules: {
            name: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }]
        },
    }
},

 prop应该写成 如 :prop="'resourceList.' + index + '.name'"
 prop格式为 '遍历的数组 . ' + 下标index + ' . 实际需要校验的key'

多层循环嵌套时 


	

  data数据结构及校验规则

data() {
    return {
        formData: {
            oneCycle: [{
                name: '',
                towCycle: [{
                    sex: '',
                    age: ''
                }]
            }]
        },
        rules: {
            name: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }],
            towCycle: {
                sex: [{
                    required: true,
                    message: '请输入性别',
                    trigger: 'blur'
                }],
                age: [{
                    required: true,
                    message: '请输入年龄',
                    trigger: 'blur'
                }]
            }
        },
    }
},

element form表单循环校验(动态绑定的数据)_第1张图片

 prop应该写成 如 :prop="'oneCycle.' + index + '.towCycle' + indexSon + ‘.sex’"
 prop格式为 '遍历的一级数组 . ' + 下标index + ‘.遍历的二级数组’+ 二级数组下标index + ' . 实际需要校验的key'

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