Element ui 下拉多选时新增一个选择所有的选项


Posted in Javascript onAugust 21, 2019

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

<!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" rel="external nofollow" rel="external nofollow" >
  <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>

渲染如下:

Element ui 下拉多选时新增一个选择所有的选项

此时可以多选,如果想要选择所有选项时,得一个个去点击,这样不是很方便,我们可以在下拉框里新增一个选择所有的选项,通过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" rel="external nofollow" rel="external nofollow" >
  <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){
          if(val.indexOf('all')!=-1 && oldval.indexOf('all')==-1 && val.length>1){           //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项
            this.citys=['all'];
          }else if(index = val.indexOf('all')!=-1 && oldval.indexOf('all')!=-1 && val.length>1){    //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1 则移除掉勾选所有
            this.citys.splice(val.indexOf('all'),1)
          }
        }
      }
    })
  </script>
</body>
</html>

这样就可以互斥了,我们选择北京和上海时,选择器如下:

Element ui 下拉多选时新增一个选择所有的选项

点击选择所有时,如下:

Element ui 下拉多选时新增一个选择所有的选项

然后再点击其它选项,选择所有就会取消勾选了,例如选择深圳:

Element ui 下拉多选时新增一个选择所有的选项

这样实现了选择所有和其它选择项的互斥,而其它选择又可以多选。

总结

以上所述是小编给大家介绍的Element ui 下拉多选时新增一个选择所有的选项,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
js时间转换毫秒的实例代码
Aug 21 #Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 #Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 #Javascript
Vue仿微信app页面跳转动画效果
Aug 21 #Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 #Javascript
深入理解Vue keep-alive及实践总结
Aug 21 #Javascript
You might like
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JS backgroundImage控制
2009/05/19 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python+opencv实现动态物体追踪
2018/01/09 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
python自动生成证件号的方法示例
2021/01/14 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
2014年基建工作总结
2014/12/12 职场文书
不同意离婚上诉状
2015/05/23 职场文书
担保书格式范文
2015/09/22 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技