【无标题】vue Element 表单验证中 对象有list列表如何验证

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'"

          <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>