问题描述：
el-select下拉框要求实现全选功能。具体功能包括：
当选择【全选】时，所有选项全部被勾选；当选择【反选】时，已选择选项变为未选择选项，未选项变为已选项当选择【清空】时，所有选项变为未选
如下图：
解决方法：
1、给el-select增加【全选】【清空】【反选】按钮
2、为el-select绑定change事件和remove-tag事件，具体实现全选功能写在事件中
实例代码：
组件：
<el-form-item label="关联设备" v-if="node.nodeId != 11 && node.nodeId != 21 && node.nodeId != 22 "><el-select style="width: 100% " v-model="node.devices" size="small" multiple collapse-tags filterable placeholder="请选择" :filter-method="dataDevFilter"><div class="select_up"><el-button type="text" v-on:click="selectDevAll"><i class="el-icon-circle-check" />全选</el-button><el-button type="text" v-on:click="removeDevTag"><i class="el-icon-close" />清空</el-button><el-button type="text" v-on:click="selectDevReverse"><i class="el-icon-copy-document" />反选</el-button></div><div class="select_list"><el-optionv-for="item in devOptions":key="item.deviceCode":label="item.deviceName":value="item.deviceCode"></el-option></div></el-select></el-form-item>
js方法：
//用户列表----start//清空操作removeTag() {this.node.users = []},//全选操作selectAll(val) {this.options.map(item => {if(!this.node.users.includes(item.userName)){this.node.users.push(item.userName)}})console.log(this.node.users)},//反选操作selectReverse(val) {val = []this.options.map(item => {let index = this.node.users.indexOf(item.userName);//判断现有选中数据是否包含如果不包含则进行反选数据if (index != -1) {} else {val.push(item.userName)}})this.node.users = val},dataFilter(query) {// this.value = val //给绑定值赋值if(query == ''){ //val不存在还原数组this.options= this.userList}else{let result = [] //存储符合条件的下拉选项this.userList.forEach(val=>{if(val.nickName.indexOf(query)!=-1) result.push(val)})this.options = result}},//用户列表----end
css样式：
<style>.el-select-dropdown__list {height: 100%;overflow: hidden;}.select_up {padding: 0 14px;font-size: 14px;position: absolute;z-index: 99999;background-color: white;top: 0px;width: 100%;border-radius: 5px 5px 0 0;::v-deep .el-button {color: #bcbcbc;font-size: 14px;i {font-size: 14px;}}::v-deep .el-button:hover {color: #409EFF;}.el-button+.el-button {margin-left: 6px;}}.select_list {margin-top: 25px;}</style>
完整组件
子组件代码如下，请注意代码注释的讲解：
1、props里面需定义value（双向绑定默认的变量，可自定义），父组件通过v-model绑定的fatherValue 会传给子组件props的 value
2、子组件的input框添加@change事件触发sendMsg，sendMsg向父组件传递change事件（双向绑定默认事件，可自定义），同时传递childValue的值
3、添加value的watch监听，当value变化时传递最新值给childValue
<template><div><el-select style="width: 100% " v-model="orgData" size="small" multiple collapse-tags filterable placeholder="请选择" :filter-method="dataFilter"@change="sendMsg()" ><div class="select_up"><el-button type="text" v-on:click="selectAll"><i class="el-icon-circle-check" />全选</el-button><el-button type="text" v-on:click="removeTag"><i class="el-icon-close" />清空</el-button><el-button type="text" v-on:click="selectReverse"><i class="el-icon-copy-document" />反选</el-button></div><div class="select_list"><el-optionv-for="item in options":key="item.userName":label="item.nickName":value="item.userName"></el-option></div></el-select></div></template><script>export default {props: {value: {type: Array,required: []},userList: {type: Array,required: []},options: {type: Array,required: []},},watch: {//监听value变化（slect控件不是必要，暂时不明）value(newValue, oldValue) {Data = newValue;}},data() {return {orgData: [],//选中数据}},methods: {//用户列表----start//清空操作removeTag() {Data = []},//全选操作selectAll(val) {this.options.map(item => {if(!Data.includes(item.userName)){Data.push(item.userName)}})console.log(Data)},//反选操作selectReverse(val) {val = []this.options.map(item => {let index = Data.indexOf(item.userName);//判断现有选中数据是否包含如果不包含则进行反选数据if (index != -1) {} else {val.push(item.userName)}})Data = val},dataFilter(query) {// this.value = val //给绑定值赋值if(query == ''){ //val不存在还原数组this.options= this.userList}else{let result = [] //存储符合条件的下拉选项this.userList.forEach(val=>{if(val.nickName.indexOf(query)!=-1) result.push(val)})this.options = result}},//用户列表----endsendMsg(){//input是默认双向绑定事件，select控件也可以用input给父组件传递数据this.$emit('input',Data)}}}</script><style scoped lang="scss">.el-select-dropdown__list {height: 100%;overflow: hidden;}.select_up {padding: 0 14px;font-size: 14px;position: absolute;z-index: 99999;background-color: white;top: 0px;width: 100%;border-radius: 5px 5px 0 0;::v-deep .el-button {color: #bcbcbc;font-size: 14px;i {font-size: 14px;}}::v-deep .el-button:hover {color: #409EFF;}.el-button+.el-button {margin-left: 6px;}}.select_list {margin-top: 25px;}</style>
父组件引用
<script>import userSelect from '@/views/processEngine/unit/userSelect'export default {components: {userSelect,deviceSelect},</script>
<el-form-item label="关联人员"><userSelect v-model="node.users" :userList="userList" :options="userList" ></userSelect></el-form-item>
注意：
当传值的时候，v-model触发了input事件， 而组件中的props属性默认就使用传入的value值， 但是回传的时候 是通过emit触发的input事件。 如果没有emit, 那么就不会触发input 也就不会反向传值
