前言
如题，前两天写一个功能的时候需要用到选择框的多选功能，记录一下
正文
elementUI的官方选择框是没有全选功能的，整理一下思路，在选择框里添加一个新的选项，全选，点击全选的时候，isAll方法用来确定是否点击了全选，selectClick方法则用来进行判断，逻辑很简单，代码如下：
对应的element组件：
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
| <el-form-item label="考核人员" prop="userIds">
<el-select
v-model="form.userIds"
multiple
filterable
placeholder="请选择考核人员"
style="width: 80%"
>
<!-- 全选功能 -->
<el-option
key="all"
value="all"
label="全选"
@click.native="isAll"
></el-option>
<!-- 选择人员 -->
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.nickName"
:value="item.userId"
@click.native="selectClick"
>
</el-option>
</el-select>
</el-form-item>
|
实现方法：
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
| selectClick() {
if (this.userList.length > this.form.userIds.length && this.form.userIds.includes("all")) {
this.form.userIds.splice(this.form.userIds.indexOf("all"), 1);
} else if (this.userList.length === this.form.userIds.length && !this.form.userIds.includes("all")) {
this.form.userIds = ['all', ...this.form.userIds]
} else {
if (this.form.userIds.includes("all")) {
this.form.userIds.splice(this.form.userIds.indexOf("all"), 1);
}
}
},
isAll() {
if (this.form.userIds.includes("all")) {
this.form.userIds = [
"all",
...this.userList.map((item) => item.userId),
];
} else {
this.form.userIds = [];
}
}
|