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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
javascript时间差插件分享
Jul 18 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
Vue filter介绍及详细使用
Apr 04 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php socket通信简单实现
2016/11/18 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
JQuery live函数
2010/12/24 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
python 测试实现方法
2008/12/24 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python JSON编解码方式原理详解
2020/01/20 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
大二自我鉴定范文
2013/10/05 职场文书
竞聘书格式及范文
2014/03/31 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
作文评语集锦
2014/12/25 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
同意报考公务员证明
2015/06/17 职场文书
排球赛新闻稿
2015/07/17 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
django上传文件的三种方式
2021/04/29 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript