项目里经常会用到，在一个多选下拉框里新增一个选择所有的选项，例如:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

    <div id="app">

        <el-form>

            <el-form-item>

                <el-select  placeholder="请选择活动区域" multiple v-model="citys">

                      <el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>

                </el-select>

              </el-form-item>

          </el-form>

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{

                cities: [

                    {value: 'Beijing',label: '北京'},

                    {value: 'Shanghai',label: '上海'},

                    {value: 'Nanjing',label: '南京'},

                    {value: 'Chengdu',label: '成都'},

                    {value: 'Shenzhen',label: '深圳'},

                    {value: 'Guangzhou',label: '广州'}

                ],

                citys:[]

            }

        })

    </script>

</body>

</html>

渲染如下:

此时可以多选，如果想要选择所有选项时，得一个个去点击，这样不是很方便，我们可以在下拉框里新增一个选择所有的选项，通过watch用几行代码就可以实现与其它选项的互斥来实现一键多选，如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

    <div id="app">

        <el-form>

            <el-form-item>

                <el-select  placeholder="请选择活动区域" multiple v-model="citys">

                    <el-option label="选择所有" value="all"></el-option>

                    <el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>

                </el-select>

              </el-form-item>

          </el-form>

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{

                cities: [

                    {value: 'Beijing',label: '北京'},

                    {value: 'Shanghai',label: '上海'},

                    {value: 'Nanjing',label: '南京'},

                    {value: 'Chengdu',label: '成都'},

                    {value: 'Shenzhen',label: '深圳'},

                    {value: 'Guangzhou',label: '广州'}

                ],

                citys:[]

            },

            watch:{

                citys:function(val,oldval){

                    let newindex =  val.indexOf('all'),oldindex =  oldval.indexOf('all');   //获取val和oldval里all的索引,如果没有则返回-1

                    if(newindex!=-1 && oldindex==-1 && val.length>1)                       //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项

                        this.citys=['all'];

                    else if(newindex!=-1 && oldindex!=-1 && val.length>1)                 //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1  则移除掉勾选所有

                        this.citys.splice(val.indexOf('all'),1)

                }

            }

        })

    </script>

</body>

</html>

这样就可以互斥了，效果如下:

挺好用的哈

Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项的更多相关文章

  1. vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  2. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题（转载）

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  3. Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  4. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  5. 2016/3/30 租房子 ①建立租房子的增、删、改php页面 ②多条件查询 ③全选时 各部分全选中 任意checkbox不选中 全选checkbox不选中

    字符串的另一种写法:<<<AAAA; 后两个AA回车要求顶格  不然报错 例子: <!DOCTYPE html> <html lang="en" ...

  6. vue结合element-ui 的select 全选问题

    下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...

  7. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  8. vue element select多选回显

    我们经常在使用 Element组件里面的 select多选 场景:添加账号的时候需要选择可见分公司(分公司为多选),添加成功之后可以编辑,需要回显添加时所提交的分公司 代码如下: 多选框: data( ...

  9. Android开发CheckBox控件，全选，反选，取消全选

    在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...

随机推荐

  1. Chapter 2 ：重构的原则

    1,什么是重构? 在不改变软件可观察行为的前提下,使用一些重构的手法,提高代码可读性. 换句话说,在保持软件可用的前提下,修改代码使得更加容易被理解. 2,为什么重构? 为了后续的代码维护和修改,易读 ...

  2. onunload事件不触发的探索

    如果现有一需求:浏览器页面关闭时弹出一个对话框,询问是否要退出,应该怎么做呢?    可用onunload事件来实现,该事件会在刷新和关闭页面时执行 我用如下3种方法绑定该事件,但所有主流浏览器都无法 ...

  3. [06]ASP.NET Core中的进程内(InProcess)托管

    ASP.NET Core 进程内(InProcess)托管 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从零开始学 ...

  4. springboot热启动中那些不为人知的东东

    在springboot热启动中,大家都知道在pom文件中配置devtools,但是当这个服务特别大,或者引入的包特别多的时候,重启一下就特别慢,如果开发的PC的内存和cpu如果不给里的h话,系统就卡主 ...

  5. .net core 的 aop 实现方法汇总

    decorator 不借助第三方DI容器,通过装饰模式通过内置的DI容器实现 https://medium.com/@willie.tetlow/net-core-dependency-injecti ...

  6. fastjson对于yyyy-MM-dd HH:mm格式的反序列化问题

    原创GrayHJX 发布于2017-03-14 22:56:33 阅读数 6851  收藏 展开 问题:最近在工作中遇到这么一个问题:有个实体类,它有个date类型的属性,当在这个属性加上fastjs ...

  7. 如何在CAD中批量打印图纸？这种方法你要知道

    CAD图纸都是使用CAD制图软件进行设计出来的,图纸的格式均为dwg格式的,不方便进行使用.就需要将图纸进行打印出来.多张CAD图纸如果一张一张进行打印速度就会非常的慢,那就可以使用CAD中的批量打印 ...

  8. 专访腾讯方亮：WeTest品牌全面升级，“好的产品一定深谙人性”

    工欲善其事,必先利其器.在当下竞争激烈的市场环境中,精品,已经成为所有游戏厂商安身立命之本.但如何提升品质,使产品成为精品,行业内却长期缺乏公开.透明,以及具备实际参考.实操价值的标准. 制定一项标准 ...

  9. ...mapMutations前面的三个点什么意思

    ...mapMutations(['login']),对象展开运算符

  10. 前端开发工具HBuilder使用技巧以及快捷键

    创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter) 中途换行: 'Ctrl+Enter' 设置charset: m e 6 Enter ...