el-select 下拉框多选实现全选的实现


Posted in Javascript onAugust 02, 2019

在写一个功能时发现el-select支持多选,但是竟然不支持全选,好无语哦,那就自己实现一下吧~有两种方法,第二种感觉简单些

方法一:下拉项增加一个【全选】,然后应该有以下几种情况:

  1. 下拉选项全都勾选时,【全选】自动勾选;
  2. 下拉选项部分勾选时,点击【全选】后,所有下拉项全部勾选;
  3. 下拉选项全都未勾选时,点击【全选】后,所有下拉选项不勾选;
  4. 下拉选项和【全选】都选上的时候,不勾选任意下拉选项,【全选】按钮就不勾选了;

上面就是我要实现的功能,我好??隆!!;故强创?氚伞!!?/p>

html部分:

<template>
 <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' @remove-tag='removeTag' placeholder='请选择'>
  <el-option label='全选' value='全选' @click.native='selectAll'></el-option>
  <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
  </el-select>
</template>

js部分:

export default {
 data() {
 return {
  selectedArray: [],
  options: [
  { name: '一一', label: 'one' },
  { name: '二二', label: 'tow' },
  { name: '三三', label: 'three' },
  { name: '四四', label: 'four' },
  { name: '五五', label: 'five' }
  ]
 }
 },
 methods: {
 selectAll() {
  if (this.selectedArray.length < this.options.length) {
  this.selectedArray = []
  this.options.map((item) => {
   this.selectedArray.push(item.name)
  })
  this.selectedArray.unshift('全选')
  } else {
  this.selectedArray = []
  }
 },
 changeSelect(val) {
  if (!val.includes('全选') && val.length === this.options.length) {
  this.selectedArray.unshift('全选')
  } else if (val.includes('全选') && (val.length - 1) < this.options.length) {
  this.selectedArray = this.selectedArray.filter((item) => {
   return item !== '全选'
  })
  }
 },
 removeTag(val) {
  if (val === '全选') {
  this.selectedArray = []
  }
 }
 }
}

看看效果图:

el-select 下拉框多选实现全选的实现

el-select 下拉框多选实现全选的实现

方法二:直接添加一个【全选】复选框,实现的功能跟方法一是一样的

html部分:

<template>
 <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder='请选择'>
 <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
 <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
 </el-select>
</template>

js部分:

export default {
 data() {
 return {
  checked: false,
  selectedArray: [],
  options: [
  { name: '一一', label: 'one' },
  { name: '二二', label: 'tow' },
  { name: '三三', label: 'three' },
  { name: '四四', label: 'four' },
  { name: '五五', label: 'five' }
  ]
 }
 },
 methods: {
 selectAll() {
  this.selectedArray = []
  if (this.checked) {
  this.options.map((item) => {
   this.selectedArray.push(item.name)
  })
  } else {
  this.selectedArray = []
  }
 },
 changeSelect(val) {
  if (val.length === this.options.length) {
  this.checked = true
  } else {
  this.checked = false
  }
 }
 }
}

css:

.el-checkbox {
 text-align: right;
 width: 100%;
 padding-right: 10px;
 }

效果图:

el-select 下拉框多选实现全选的实现

el-select 下拉框多选实现全选的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
JavaScript流程控制(循环)
Dec 06 Javascript
js动态获取时间的方法分析
Aug 02 #Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 #Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
vue单页应用的内存泄露定位和修复问题小结
Aug 02 #Javascript
vue回到顶部监听滚动事件详解
Aug 02 #Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 #Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 #Javascript
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
php接口技术实例详解
2016/12/07 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
python数据抓取3种方法总结
2021/02/07 Python
python re模块常见用法例举
2021/03/01 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
公司薪酬管理制度
2014/01/31 职场文书
工地安全质量标语
2014/06/07 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
心得体会的写法
2014/09/05 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2015年车间主任工作总结
2015/05/21 职场文书