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

最新推荐文章于 2024-09-18 11:01:49 发布
最新推荐文章于 2024-09-18 11:01:49 发布
阅读量2.1k 收藏 3
点赞数 4
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjwgjw1111/article/details/129306610
版权
该文章展示了一个使用Vue.js和ElementUI库实现的下拉多选组件，包括全选、反选和清空功能。通过数据绑定和JavaScript方法处理选中状态，同时提供了CSS样式来美化组件。
摘要由CSDN通过智能技术生成

显示效果

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

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

实例代码

页面内引用

组件：
<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>
G佳伟
关注
专栏目录
Element-UI el-select下拉框多选实现全选
一碗清深的博客
11-17 3575
在el-select下拉框中实现多选全选的功能
vue+elementui实现el-select全选 反选
咬耳朵小布丁
06-12 3205
#vue实现el-el-select多选全选 反选 实现的功能： 1、 多选 2、 选择【全选】时多选数据及反选 3、 数据全部勾选时【全选】勾选，全选情况下去除一个选项【全选消失】 <el-select v-model="orgData" size="small" multiple collapse-tags @change="selectAll" @remove-ta
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 中清空 el-select 选项的方法
weixin_41234139的博客
08-20 120
1、绑定值：首先确保你的el-<template>登录后复制 <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" ...
el-select实现全选功能
weiliang_66的博客
06-16 2798
思路：1、下拉选项增加全部，value为其余选项value的值用逗号拼接。2、处理多选情况其他选项与全部选项的互斥功能。
ElementPlus 之 el-select 多选实现全选功能
都随它大小便吧
05-05 3020
经常会遇到这种多选下拉框支持全选的需求，在此简单记录一下在 ElementPlus 框架下，如何使得多选的 el-select 控件支持实现全选功能。
el-select 下拉框全选、多选的几种方式组件_el-select全选
2401_84435768的博客
07-14 1673
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
08-01
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
vue +el+select 下拉框选择全部多选
weixin_64374806的博客
07-11 728
【代码】vue +el+select 下拉框多选。
el-select 多选，清空，选择“全部”其余清空，取消全部，其余还原
weixin_41346436的博客
12-22 5144
el-select 多选，清空，选择“全部”其余清空，取消全部，其余还原 记录一下 <el-form-item v-show="formData.pushScope == '个人'" label="选择学生:"> <el-select id="newStyle" v-model="formData.studentIdList" multiple pla
jQueryMultipleSelect实现下拉框多选
12-27
jQuery Multiple Select实现下拉框多选，请注意是Multiple 。实例介绍详细，想用的可以直接Copy进去用
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
11-20
这是一个项目中常见的需求，el-select 为下拉多选，默认值不可删除，或者指定值不可删除。 实现效果： el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性，所有明显不支持。 解决思路（从el-select 的角度来考虑，其他组件组合的情况暂不考虑） 想要实现某些选项是不删除，1、需要tag 不可删除，2、options 不可选择 options 不可选择很好实现，只需要给一个disabled属性。tag 不可删除才是关键。下面是我几种解决思路。 1、 watch 进行监听，当操作不可删除的选项时，el-select 绑定的值
el-select多选下拉框实现全选功能
欢乐时光已经开始---博客
12-09 1万+
elementUI的下拉框支持多选，但是不支持全选，但需求就要这个功能，怎么办，封装呗~有两种方法，第二种感觉简单些。 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 下拉选项全都勾选时，【全选】自动勾选； 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选； 下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选； 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按...
el-select 清空问题
yuxinSir的博客
01-15 9787
<el-form-item label="省" prop="cityName"> <el-select v-model="editForm.pid" placeholder="请选择省" class="handle-select mr10" @change="getCity"> <el-option v-for="item in
vue+el-select下拉实现：全选、反选、清空功能
热门推荐
askuld的博客
06-13 1万+
2、为el-select绑定change事件和remove-tag事件，具体实现全选功能写在事件中。el-select下拉框要求实现全选功能。1、给el-select增加【全选】【清空】【反选】按钮。
el-select 全选实现
leifei4468884256的专栏
03-16 1193
el-select 全选功能实现
el-select选择器实现全选功能
最新发布
qq_44699269的博客
09-18 727
el-select选择器实现全选功能
vue 实现el-select下拉多选及分页的功能
05-26
实现el-select下拉多选及分页功能，可以使用 el-select 的 remote 方法结合 el-pagination 组件实现。 首先，需要在 el-select 中添加 multiple 和 remote 属性来开启多选和远程搜索功能： ```html <el-select v-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

G佳伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值