首页 前端知识 vue el-select下拉实现:全选、反选、清空功能

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

2024-04-19 21:04:05 前端知识 前端哥 412 48 我要收藏

问题描述:

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5268.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!