element中 form 表单验,验证数组中的每一个form表单
使用场景: 每点击一次就新增一个form表单,并且校验添加的所有的form
html 结构
<div
v-for="(itemList, index) in trayData"
:key="index"
class="tray_line box"
>
<el-form
:model="itemList"
:rules="trayRule"
:ref="`form-${index}`"
class="demo-form-inline"
>
<el-row>
<el-col :span="6">
<el-form-item prop="from_tray_name" style="margin-left: 30px">
<el-select
v-model="itemList.from_tray_name"
placeholder="请选择样品托盘名称"
>
<el-option
v-for="item in trayList"
:key="item.uid"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</div>
此时就是点击按钮就会新增一条这样的数据
js 部分代码实现
data() {
return {
// 样品搬运验证
trayRule: {
from_tray_name: [
{ required: true, message: "请选择样品托盘名称", trigger: "change" },
],
},
}
},
methods:{
async submit() {
let validateArr = [];
for (const key in this.$refs) {
if (key === "formInline" || this.$refs[key].length) {
const currentRef =
key === "formInline" ? this.$refs[key] : this.$refs[key][0];
const res = await currentRef.validate().catch((err) => err);
validateArr.push(res);
}
}
const isSuccess = !validateArr.filter((item) => !item).length;
// if 他有值就 请求接口信息, this.sub 是接口信息封装
isSuccess && this.sub();
},
}
这个问题也是挺奇葩的,这要判断this. r e f s [ k e y ] 也 就 是 我 们 定 义 的 自 定 义 的 r e f 名 称 ‘ refs[key] 也就是我们定义的自定义的 ref 名称 ` refs[key]也就是我们定义的自定义的ref名称‘{form-index}`这个是不唯一的,所以判断这个,然后再去一条一条的校验 如果大家有更好的方法,可以给我留言,一起学习,一起探讨.
