el-form-item 校验指定prop
时间: 2024-03-05 09:45:03 浏览: 115
el-form 多层级表单的实现示例
el-form-item 校验指定 prop 的方法如下:
1. 首先,在 el-form-item 中设置 prop 属性,该属性的值应与要校验的字段在表单数据对象中的属性名一致。
```html
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
```
2. 在 el-form 中设置 ref 属性,以便在代码中获取表单实例。
```html
<el-form ref="form" :model="formData">
<!-- el-form-item 的代码 -->
</el-form>
```
3. 在需要触发校验的时机(例如点击提交按钮)调用表单实例的 validate 方法。
```javascript
this.$refs.form.validate((valid) => {
if (valid) {
// 校验通过,执行相应操作
} else {
// 校验不通过,执行相应操作
}
});
```
以上是校验单个 el-form-item 的方法。如果需要校验多个 el-form-item,可以使用 el-form-item 的循环指令 v-for,并在 prop 属性中使用动态属性名。
```html
<el-form-item v-for="(item, index) in formList" :label="item.label" :prop="`list[${index}].value`">
<el-input v-model="item.value"></el-input>
</el-form-item>
```
在这个例子中,formList 是一个数组,每个元素包含一个 label 和一个 value 属性。通过 v-for 循环生成多个 el-form-item,并使用动态属性名 `list[${index}].value` 来指定校验的 prop。
阅读全文