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 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
javascript面向对象编程代码
Dec 19 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 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
html中select语句读取mysql表中内容
2006/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
不同意离婚代理词
2015/05/23 职场文书
早安问候语大全
2015/11/10 职场文书