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 直接操作本地文件的实现代码
Dec 01 Javascript
javascript学习之闭包分析
Dec 02 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
JS实现简易计算器
Feb 14 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
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python读取word文本操作详解
2018/01/22 Python
python使用tornado实现登录和登出
2018/07/28 Python
Django forms组件的使用教程
2018/10/08 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
几个SQL的面试题
2014/03/08 面试题
银行委托书范本
2014/09/28 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android