代码如下:
`
<el-table :data="formLabelAlign"> <el-table-column label="地址"> <template slot-scope="scope"> <el-form :rules="rules" :model="scope.row.data" ref="'ref_name'+scope.$index"> <el-form-item :label="scope.row.data.labe_name" prop="name"> <el-input v-model="scope.row.data.name"></el-input> </el-form-item> </el-form> </template> </el-table-column> <el-table-column> <template slot-scope="scope"> <el-button @click="submit(scope.$index,'ref_name')">提交</el-button> </template> </el-table-column> </el-table> return { formLabelAlign: [ { name: "one", data: { labe_name: "one", name: "", son: [{ age: 18 }] } }, { name: "two", data: { labe_name: "two", name: "", son: [{ age: 18 }] } } ], rules: { name: [ { required: true, message: "不能为空", trigger: "blur" }, { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" } ] } }; submit(index, ref_name) { this.$refs['ref_name'+index].validate(valid => { if (valid) { console.log(index + ":OK"); } else { console.log(index + ":NO"); return false; } }) }
`
因为外面套了表单,里面的from等于是循环渲染出来的。
ref="'ref_name'+scope.$index"
this.$refs['ref_name'+index].validate
这样写会报错validate' of undefined
ref="ref_name"
this.$refs['ref_name'].validate
这样写的话,点击第一个按钮实际验证的是第二个input,点第二个按钮会报错validate' of undefined
网上查了一些解决方案,单都没解决这个问题。我个人任为问题还是出在动态$refs这块没对应到具体是那个data的问题,还请各位大佬帮忙看看问题到底是在那?该如何解决?先行谢过了!!!
已解决
悬赏分:0
- 解决时间 2021-11-29 02:00
点赞 0反对 0举报 0
收藏 0
分享 0
回答3
最佳