vue+elementui表单校验（数组嵌套、object对象嵌套）

我们在做表单验证时，可能会出现form对象中嵌套数组或对象的情况，这时我们怎么对嵌套的参数做验证呢？下面给出了两种简单的解决方式。

一、表单数组嵌套，例如：

form: {
    title: "test",
    list: [{
        label: 'test1',
        value: '111',
    },{
        label: 'test2',
        value: '22',
    }]
}

简单的解决办法就是直接绑定list数组下的对象字段名，例如：

<el-form-item v-for="(item, i) in form.list" :key="i" :label="item.label" :prop="`list[${i}].value`" :rules="{ required: true, message: 'Required', trigger: 'blur">
   <el-input v-model="item.value"></el-input>
</el-form-item>

二、object对象嵌套，例如：

<el-form-item label="标题" prop="title">
  <el-input
    v-model="form.title"
    maxlength="50"
    show-word-limit>
  </el-input>
</el-form-item>
<el-form-item label="姓名" prop="data.name">
  <el-input
    v-model="form.data.name"
    maxlength="50"
    show-word-limit>
  </el-input>
</el-form-item>
<el-form-item label="地址" prop="data.address">
  <el-input
    v-model="form.data.address"
    maxlength="50"
    show-word-limit>
  </el-input>
</el-form-item>

form: {
   title: '',
   data: {
     name: '',
     address: '',
   }
}