Select 组件实现【全选】（基于 Element）

〇、前言

在 Element 中，Select 组件支持单选和多选，但是并没有全选的属性，因此只能通过其事件和属性来实现，本文将实现一个简单的示例。
注意：本文的示例中，通过 leixing1 来兼容多控件共享同一方法。
一、两种实现

1.1 通过添加一个 Checkbox 来操作全选（推荐）

• 大致思路
  

在全部选项最上边添加一个 Checkbox 复选框，勾选时自动全选，取消勾选自动取消全部已选中项。
再给 Select 添加一个 Change 事件方法，当选中项等于备选列表长度，则自动勾选 Checkbox，否则取消勾选。

• 实现效果
  

 

• 前端实现代码
  

1. <el-select
2.   
3.   v-model="formData.leixing1"
4.   filterable multiple
5.   clearable @change="changeSelect($event,'leixing1')"
6.   placeholder="全部类型（多选）"
7. >
8.   <el-checkbox :indeterminate="isIndeterminate_lx" v-model="checked" @change="selectAll('leixing1')" >全选</el-checkbox>
9.   <el-option
10. <el-select
11.   
12.   v-model="formData.leixing1"
13.   filterable multiple
14.   clearable @change="changeSelect($event,'leixing1')"
15.   placeholder="全部类型（多选）"
16. >
17.   <el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
18.   <el-option
19.     v-for="item in leixing1OptionsList"
20.     :label="item.mingcheng"
21.     :value="item.bianma"
22.     :key="item.bianma"
23.   />
24. </el-select>v-for="item in leixing1OptionsList"
25. <el-select
26.   
27.   v-model="formData.leixing1"
28.   filterable multiple
29.   clearable @change="changeSelect($event,'leixing1')"
30.   placeholder="全部类型（多选）"
31. >
32.   <el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
33.   <el-option
34.     v-for="item in leixing1OptionsList"
35.     :label="item.mingcheng"
36.     :value="item.bianma"
37.     :key="item.bianma"
38.   />
39. </el-select>:label="item.mingcheng"
40. <el-select
41.   
42.   v-model="formData.leixing1"
43.   filterable multiple
44.   clearable @change="changeSelect($event,'leixing1')"
45.   placeholder="全部类型（多选）"
46. >
47.   <el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
48.   <el-option
49.     v-for="item in leixing1OptionsList"
50.     :label="item.mingcheng"
51.     :value="item.bianma"
52.     :key="item.bianma"
53.   />
54. </el-select>:value="item.bianma"
55. <el-select
56.   
57.   v-model="formData.leixing1"
58.   filterable multiple
59.   clearable @change="changeSelect($event,'leixing1')"
60.   placeholder="全部类型（多选）"
61. >
62.   <el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
63.   <el-option
64.     v-for="item in leixing1OptionsList"
65.     :label="item.mingcheng"
66.     :value="item.bianma"
67.     :key="item.bianma"
68.   />
69. </el-select>:key="item.bianma"
70.   />
71. </el-select>

复制代码

• js 代码实现
  

1. [/code][size=4]1.2 通过增加一个 Option 选项‘全选’来实现[/size]
3. [list]
4. [*][b]大致思路[/b]
5. [/list]手动增加 Select 的第一个选项‘全选’，通过这个选项的事件，来操作是否全选。
6. 再通过列表的长度和已选中的选项进行比较，相等就自动勾选‘全选’，否则就取消勾选。
7. [b][i]注意：Select 组件的值会包含‘全选’这个值，需要在后端进行过滤。[/i][/b]
8. [list]
9. [*][b]实现效果[/b]
10. [/list][align=center] [/align]
11. [list]
12. [*][b]前端控件代码[/b]
13. [/list][code]<el-select
14.   
15.   v-model="formData.leixing1"
16.   filterable multiple
17.   clearable @change="changeSelect($event,'leixing1')"
18.   placeholder="全部类型（多选）"
19. >
20.   <el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
21.   <el-option
22.     v-for="item in leixing1OptionsList"
23.     :label="item.mingcheng"
24.     :value="item.bianma"
25.     :key="item.bianma"
26.   />
27. </el-select>

复制代码

• js 代码实现及解释
  

[code][/code]
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！