el-select校验
时间: 2023-07-20 07:44:26 浏览: 112
详解为element-ui的Select和Cascader添加弹层底部操作按钮
要对 el-select 进行校验,可以使用 Element UI 提供的表单验证功能。具体步骤如下:
1. 在 el-select 上添加 ref 属性,用于在代码中获取 el-select 的实例。
```html
<el-form-item label="选择项" prop="selectItem">
<el-select v-model="selectItem" placeholder="请选择" ref="selectItem">
<el-option label="选项一" value="1"></el-option>
<el-option label="选项二" value="2"></el-option>
<el-option label="选项三" value="3"></el-option>
</el-select>
</el-form-item>
```
2. 在 el-form 上设置 rules 属性,用于指定 el-select 的校验规则。
```html
<el-form :model="form" :rules="rules" ref="form">
<!-- el-select 代码省略 -->
</el-form>
```
```javascript
data() {
return {
form: {
selectItem: ''
},
rules: {
selectItem: [
{ required: true, message: '请选择选项', trigger: 'change' }
]
}
}
}
```
3. 在提交表单时,调用 el-form 的 validate 方法,对 el-select 进行校验。
```javascript
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过
// 其他代码省略
} else {
// 表单校验失败
return false;
}
});
}
```
以上就是使用 Element UI 进行 el-select 校验的步骤。其中,校验规则可以根据实际需求进行修改。如果需要自定义校验规则,可以在 rules 中添加自定义校验函数。
阅读全文