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>
|