https://www.jb51.net/article/163201.htm
这篇文章主要介绍了详解element-ui设置下拉选择切换必填和非必填,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
➢ 需求
默认都是必选
下拉选择的时候
选择必填,活动名称为必填,需要校验和显示*
选择非必填,活动名称不做校验,隐藏*
➢ 初始校验规则
经测试,网上其他的方式都没有实现需求,动态切换rules
中的required
没有作用
因为按照以下的写法的话,element-ui
在组件初始化后校验规则就定型了,切换也没用
1
2
3
4
5
6
7
8
|
rules: { name: [ { required: true , message: "请输入名称" , trigger: "blur" } ], region: [ { required: true , message: "请选择类型" , trigger: "blur" } ] } |
➢ 解决方案
第一步:
去除rules
中需要动态校验的字段规则
去除name
1
2
3
4
5
|
rules: { region: [ { required: true , message: "请选择类型" , trigger: "blur" } ] } |
第二步:
在字段为name
的form-item
上,添加required
属性
下面代码isHaveTo
为新字段,根据下拉框选择的值来决定是为true
还是false
1
2
3
|
<el-form-item label= "活动名称" prop= "name" :required= "isHaveTo" > <el-input v-model= "ruleForm.name" ></el-input> </el-form-item> |
第三步:
计算属性,新增字段isHaveTo
下拉选择框非必须是为1
,其他都是必填,包括默认
1
2
3
|
<el-form-item label= "活动名称" prop= "name" :required= "isHaveTo" > <el-input v-model= "ruleForm.name" ></el-input> </el-form-item> |
效果如图:
下拉切换,*
号显隐,提交时也有不同规则
注意,新的问题来了
在选择必填时,没有了之前的错误提示文字,而是element
自带的提示
第四步:
设置错误提示
使用自定义函数控制流程
把name
字段重新加回去rules
注意是函数{ validator: validateName }
1
2
3
4
5
6
|
rules: { name: [{ validator: validateName }], region: [ { required: true , message: "请选择类型" , trigger: "blur" } ] } |
然后设置函数validateName
可以看到,必填时按照我们设置的提示语提示,非必填时,校验通过
贴上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
data() { // 验证活动名称的函数 let validateName = (rule, value, callback) => { // 当活动名称为空值且为必填时,抛出错误,反之通过校验 if ( this .ruleForm.name === "" && this .isHaveTo) { callback( new Error( "请输入活动名称" )); } else { callback(); } }; return { ruleForm: { name: "" , region: "" }, rules: { name: [{ validator: validateName }], region: [ { required: true , message: "请选择类型" , trigger: "blur" } ] } }; }, |
➢ 完整demo代码
demo
使用vue-cli
,引入element-ui
核心代码参考如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<template> <div> <el-form :model= "ruleForm" :rules= "rules" ref= "ruleForm" label-width= "100px" class= "demo-ruleForm" > <el-form-item label= "活动名称" prop= "name" :required= "isHaveTo" > <el-input v-model= "ruleForm.name" ></el-input> </el-form-item> <el-form-item label= "活动区域" prop= "region" > <el-select v-model= "ruleForm.region" placeholder= "请选择活动区域" style= "width:100%" > <el-option label= "必填" value= "0" ></el-option> <el-option label= "非必填" value= "1" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type= "primary" @click= "submitForm('ruleForm')" >立即创建</el-button> </el-form-item> </el-form> </div> </template> <script> export default { name: "HelloWorld" , data() { // 验证活动名称的函数 let validateName = (rule, value, callback) => { // 当活动名称为空值且为必填时,抛出错误,反之通过校验 if ( this .ruleForm.name === "" && this .isHaveTo) { callback( new Error( "请输入活动名称" )); } else { callback(); } }; return { ruleForm: { name: "" , region: "" }, rules: { name: [{ validator: validateName }], region: [ { required: true , message: "请选择类型" , trigger: "blur" } ] } }; }, computed: { isHaveTo: function () { return this .ruleForm.region !== `1`; } }, methods: { submitForm(formName) { this .$refs[formName].validate(valid => { if (valid) { console.log(`已提交表单`); } else { console.log( "error submit!!" ); return false ; } }); } } }; </script> |