类似这样的:
部分代码删减, 最主要的就是 element-ui表单校验prop的链式写法
:prop="'list.'+index+'.name'" 或者:prop="'list[0].name'"两种形式都可以访问
element源码中接收的是一个字符串,上面的里那两种形式都是可以的,最终经过源码处理,都转为了list.0.value的形式
<el-form-item label="app自定义显示内容" required> <div class="selectCustomInfo" v-for="(item, index) of temp.content" :key="index" > <el-form-item :prop="'content.' + index + '.name'" :rules="rules.customInfoGroup.name" class="nameInput" > <el-input v-model.trim="item.name" placeholder="内容标题" maxlength="8" show-word-limit /> </el-form-item> <span>:</span> <el-form-item :prop="'content.' + index + '.value'" :rules="rules.customInfoGroup.value" class="valueInput" > <el-input v-model.trim="item.value" placeholder="内容描述" maxlength="30" show-word-limit /> </el-form-item> <!-- 加号按钮 --> <el-button v-if="index == 0" type="primary" icon="el-icon-plus" class="funcBtn" @click="addCustomInfoItem" ></el-button> <!-- 删除按钮 --> <el-button v-else class="funcBtn" icon="el-icon-delete" @click="delCustomInfoItem(index)" ></el-button> </div> </el-form-item>
// 表单验证规则 rules: { // customInfo链式校验数组里面的对象的每个值 customInfoGroup: { name: [ { required: true, message: '内容不能为空', trigger: 'change' } ], value: [ { required: true, message: '内容不能为空', trigger: 'change' } ] } },
标签:name,校验,element,ui,链式,表单,prop From: https://www.cnblogs.com/520BigBear/p/16607185.html