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

Best_Liu~

已于 2023-06-13 14:43:23 修改

阅读量1.2w

点赞数 5

文章标签： vue.js elementui javascript

于 2023-06-13 11:21:16 首次发布

本文链接：https://blog.youkuaiyun.com/askuld/article/details/131184542

版权

问题描述：

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-option
                                    v-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-option
                    v-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) {
            this.orgData = newValue;
        }
    },
    data() {
        return {
            orgData: [],//选中数据
        }
    },
    methods: {
        //用户列表----start
            //清空操作
            removeTag() {
                this.orgData = []
            },
            //全选操作
            selectAll(val) {
                this.options.map(item => {
                    if(!this.orgData.includes(item.userName)){
                        this.orgData.push(item.userName)
                    }
                })
                console.log(this.orgData)
            },
            //反选操作
            selectReverse(val) {
                val = []
                this.options.map(item => {
                    let index = this.orgData.indexOf(item.userName);
                    //判断现有选中数据是否包含如果不包含则进行反选数据
                    if (index != -1) {
                    } else {
                        val.push(item.userName)
                    }
                })
                this.orgData = 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

        sendMsg(){
            //input是默认双向绑定事件，select控件也可以用input给父组件传递数据
            this.$emit('input',this.orgData)
        }


        
    }
}
</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 也就不会反向传值