element-ui复杂表单校验

复杂表单如下：

               label-width="120px"
               label-position="right" >
        prop="name" 
　　　　　　　　　　　　　　　　　　　　　　:rules="[{required:true,message:'不能为空',trigger:'blur'}]"
　　　　　>
          name">
        
        prop="address.name" 
　　　　　　　　　　　　　　　　　　　　　　:rules="[{required:true,message:'不能为空',trigger:'blur'}]"

>

          address.name">
        
        for="(item,index) in form.sponsor">
          
                        :prop="'sponsor.'+index+'.name'"
                        :rules="[{required:true,message:'不能为空',trigger:'blur'}]"
          >
            name">
          
        
        for="(item,index) in form.advices">
          
                        :prop="'advices.'+index+'.content'"
                        :rules="[{required:true,message:'不能为空',trigger:'blur'}]"
          >
            content">
          
          删除
        
        

        添加建议事项
      

export default {
      ...
      data(){
        return {
          form:{
            name:'',
            address:{
              id:'',
              name:''
            },
            sponsor:[
              {id:'1',name:'Tom'},
              {id:'2',name:'Jack'}
            ],
            advices:[]
          },
          rules:{
　　　　　　　　//也可以写在data中
            //name:[{required:true,message:'不能为空',trigger:'blur'}],
            //'address.name':[{required:true,message:'不能为空',trigger:'blur'}],
            //'sponsor.0.name':[{required:true,message:'不能为空',trigger:'blur'}]//校验也可以这样写
          }
        }
      },

      methods:{
        deleteAdvices(idx){
          this.form.advices.splice(idx,1)
        },
        addAdvices(){
          let obj = {
            content:''
          }
          this.form.advices.push(obj)
        }
      }
    }

效果图：

转载于:https://www.cnblogs.com/YuKiee/p/9651086.html