[JavaScript知识库]【VUE 表单验证】vue Element 表单验证中 多层v-for验证方法

vue Element 表单验证中 对象有list列表如何验证

正常情况下只需要<el-form-item> 标签中填入prop数据属性即可。

              <el-form-item label="接口描述" prop="desc">
                <el-input type="textarea" v-model="item.desc"></el-input>
              </el-form-item>

一、对象中有一层数组
假如要验证的数据如下：
form: {
  source: null,
  sourceZH: null,
  desc: null,
  interfaceList: [{
    identifier: null,
    method: null,
    url: null,
    desc: null
  },
? { identifier: null, method: null, url: null, desc: null }]
}

就需要：<el-form-item> 中绑定rule 和prop

rule ：就是定义的规则

prop:? 需要? 字段名.下标.子字段名? 也就是?:prop="'interfaceList.'+index+'.identifier'"

index是interfaceList下标

          <template v-for="(item,index) in form.interfaceList">
            <el-col :span="24">
              <el-divider></el-divider>
            </el-col>
            <el-col :span="24">
              <div style="float: right;margin: 2px 10px 3px;cursor:pointer"  v-if="title !== '修改菜单'" @click="delInterface(index)">X</div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接口标识"   :prop="'interfaceList.'+index+'.identifier'"   :rules="rules.identifier">
                <el-input v-model="item.identifier" placeholder="请输入接口标识"/>
              </el-form-item>
            </el-col>

一、对象中有二层数组
假如要验证的数据如下：?

form: {
  source: null,
  sourceZH: null,
  desc: null,
  interfaceList: [{
    identifier: null,
    elements: [{
      element: null,
      elementZH: null,
    }]
  }]
}

prop:? 需要? 字段名.下标.子字段名? 也就是?

:prop="'interfaceList.'+index+'.elements.'+key+'.element'"

index是interfaceList下标

key是elements下标

              <el-col :span="10">
                <el-form-item label="字段名称" :prop="'interfaceList.'+index+'.elements.'+key+'.elementZH'" :rules="rules.elementZH">
                  <el-input v-model="tt.elementZH" placeholder="请输入服务标识" />
                </el-form-item>
              </el-col>
            <el-col :span="10">
              <el-form-item label="字段标识" :prop="'interfaceList.'+index+'.elements.'+key+'.element'" :rules="rules.element">
                  <el-input v-model="tt.element" placeholder="请输入服务标识" />
                </el-form-item>
              </el-col>