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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 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
jquery 输入框数字限制插件
2009/11/10 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
浅谈Python的文件类型
2016/05/30 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python实现ID3决策树算法
2017/12/20 Python
露营世界:Camping World
2017/02/02 全球购物
优秀的计算机专业求职信范文
2013/12/27 职场文书
小学生班会演讲稿
2014/01/09 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
婚前财产协议书范本
2014/10/19 职场文书
个人作风建设心得体会
2014/10/22 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
公司表扬信格式
2015/05/04 职场文书
城南旧事电影观后感
2015/06/16 职场文书
护理心得体会范文
2016/01/22 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Nginx跨域问题解析与解决
2022/08/05 Servers