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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
javascript 精粹笔记
2010/05/09 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
Angularjs 基础入门
2014/12/26 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
React快速入门教程
2017/01/17 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
Vue触发式全局组件构建的方法
2018/11/28 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
Python正则表达式教程之一:基础篇
2017/03/02 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
师范生教师实习自我鉴定
2013/09/27 职场文书
艺术爱好者的自我评价分享
2013/10/08 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
五一手机促销方案
2014/03/08 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle