vue+el-select下拉多选实现,全选,反选,清空功能源码

显示效果

vue+elementui实现下拉多选，全选，反选，清空功能

实例代码

页面内引用

组件：

<el-select v-model="orgData" size="small" multiple collapse-tags>
            <div class="select_up">
                <el-button type="text" v-on:click="selectAll">
                    <i class="jw jw-quanxuan " />
                    全选</el-button>
                <el-button type="text" v-on:click="removeTag">
                    <i class="jw jw-qingkong " />
                    清空</el-button>
                <el-button type="text" v-on:click="selectReverse">
                    <i class="jw jw-fanxuan " />
                    反选</el-button>
            </div>
            <div class="select_list">
                <el-option v-for="item in webAddresses" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
            </div>
        </el-select>

js

export default {
    data() {
        return {
            webAddresses: [{
                orgId: '1',
                orgName: '全选1'
            }, {
                orgId: '2',
                orgName: '全选2'
            }, {
                orgId: '3',
                orgName: '全选2'
            }, {
                orgId: '4',
                orgName: '全选2'
            }, {
                orgId: '5',
                orgName: '全选2'
            }, {
                orgId: '6',
                orgName: '全选2'
            }, {
                orgId: '7',
                orgName: '全选2'
            }, {
                orgId: '8',
                orgName: '全选2'
            }, {
                orgId: '9',
                orgName: '全选2'
            }
            ],// 遍历的select option 从后端遍历
            orgData: [],//选中数据
        }
    },
    methods: {
        removeTag() {
            this.orgData = []
        },
        selectAll(val) {
            val = []
            this.webAddresses.map(item => {
                val.push(item.orgId)
            })
            this.orgData = val
        },
        selectReverse(val) {
            val = []
            this.webAddresses.map(item => {
                let index = this.orgData.indexOf(item.orgId);
                console.log(index)
                if (index != -1) {
                    
                    //orgData.splice(index, 1)
                } else {
                    val.push(item.orgId)
                }
            })
            this.orgData = val
        }



        
    }
}

css

.el-select-dropdown__list {
    height: 100%;
    overflow: hidden;

}

.select_up {
    padding: 0 12px;
    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;
}

完整组件

<template>
    <div>
        <el-select v-model="orgData" size="small" multiple collapse-tags>
            <div class="select_up">
                <el-button type="text" v-on:click="selectAll">
                    <i class="jw jw-quanxuan " />
                    全选</el-button>
                <el-button type="text" v-on:click="removeTag">
                    <i class="jw jw-qingkong " />
                    清空</el-button>
                <el-button type="text" v-on:click="selectReverse">
                    <i class="jw jw-fanxuan " />
                    反选</el-button>
            </div>
            <div class="select_list">
                <el-option v-for="item in webAddresses" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
            </div>
        </el-select>

    </div>
</template>
<script>
export default {
    data() {
        return {
            webAddresses: [{
                orgId: '1',
                orgName: '全选1'
            }, {
                orgId: '2',
                orgName: '全选2'
            }, {
                orgId: '3',
                orgName: '全选2'
            }, {
                orgId: '4',
                orgName: '全选2'
            }, {
                orgId: '5',
                orgName: '全选2'
            }, {
                orgId: '6',
                orgName: '全选2'
            }, {
                orgId: '7',
                orgName: '全选2'
            }, {
                orgId: '8',
                orgName: '全选2'
            }, {
                orgId: '9',
                orgName: '全选2'
            }
            ],// 遍历的select option 从后端遍历
            orgData: [],//选中数据
        }
    },
    methods: {
        //清空操作
        removeTag() {
            this.orgData = []
        },
        //全选操作
        selectAll(val) {
            val = []
            this.webAddresses.map(item => {
                val.push(item.orgId)
            })
            this.orgData = val
        },
        //反选操作
        selectReverse(val) {
            val = []
            this.webAddresses.map(item => {
                let index = this.orgData.indexOf(item.orgId);
                //判断现有选中数据是否包含如果不包含则进行反选数据
                if (index != -1) {
                } else {
                    val.push(item.orgId)
                }
            })
            this.orgData = val
        }



        
    }
}
</script>
<style scoped lang="scss">
.el-select-dropdown__list {
    height: 100%;
    overflow: hidden;

}

.select_up {
    padding: 0 12px;
    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>