最近做项目时，在做表单验证时，因为业务出现 form 表单中嵌套数组或对象的情况，对于这种情况，我们怎么对嵌套的参数做验证呢？ 记录下解决方案：

 data () {
  return




    
 {
    // 表单数据
    ruleFormData: {
      sysName: '',
      relationList: [],
      functionList: [],
      data: {
        name: '',
        address: ''
    // 表单验证规则
    rules: {
      system: [
        { required: true, message: "请选择名称", trigger: "change" }
      "relationList[0].stationId" : [
        { required: true, message: "请选择监测点", trigger: "change" }
      "functionList[0].stationId": [
        { required: true, message: "请选择监测点", trigger: "change" }
      "data.name": [
        { required: true, message: "请选择名称", trigger: "blur" }
表单数组嵌套的解决方案：
<el-form  
  ref="ruleFormDataRef"
  label-position="top"
  :model="ruleFormData"
  :rules="rules"
  <div v-for="(item, i) in ruleFormData.relationList"  :key="i">
    <el-form-item 
       label="监测点"
       :prop="`relationList[${i}].stationId`"
      <el-select
        style="width: 100%"
        v-model="item.stationId"
        placeholder="请选择监测点"
        multiple
        <el-option
          v-for="item of activeStationsIds"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
  </div>
</el-form>
object对象嵌套
<el-form  
  ref="ruleFormDataRef"
  label-position="top"
  :model="ruleFormData"
  :rules="rules"
  <el-form-item label="姓名" prop="data.name">
    <el-input
      v-model="ruleFormData.data.name"
      maxlength="50"
      show-word-limit>
    </el-input>
  </el-form-item>
  <el-form-item label="地址" prop="data.address">
    <el-input
      v-model="ruleFormData.data.address"
      maxlength="50"
      show-word-limit>
    </el-input>
  </el-form-item>
</el-form>
复制代码