vue+el-select下拉实现：全选、反选、清空功能

问题描述：

el-select下拉框要求实现全选功能。具体功能包括：

• 当选择【全选】时，所有选项全部被勾选；
• 当选择【反选】时，已选择选项变为未选择选项，未选项变为已选项
• 当选择【清空】时，所有选项变为未选

如下图：

解决方法：

1、给el-select增加【全选】【清空】【反选】按钮

2、为el-select绑定change事件和remove-tag事件，具体实现全选功能写在事件中

实例代码：

组件：

                        
                            

                                
                                    
                                    全选
                                
                                    
                                    清空
                                
                                    
                                    反选
                            

                            

                                
                                
                            
                        
                    

 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样式：

完整组件

子组件代码如下，请注意代码注释的讲解：

1、props里面需定义value（双向绑定默认的变量，可自定义），父组件通过v-model绑定的fatherValue 会传给子组件props的 value

2、子组件的input框添加@change事件触发sendMsg，sendMsg向父组件传递change事件（双向绑定默认事件，可自定义），同时传递childValue的值

3、添加value的watch监听，当value变化时传递最新值给childValue

父组件引用

注意：

        当传值的时候，v-model触发了input事件， 而组件中的props属性默认就使用传入的value值，   但是回传的时候  是通过emit触发的input事件。  如果没有emit, 那么就不会触发input   也就不会反向传值