el-select 下拉框多选实现全选的实现
更新时间：2019年08月02日 10:30:39 作者：十一
这篇文章主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些
方法一：下拉项增加一个【全选】，然后应该有以下几种情况：
- 下拉选项全都勾选时，【全选】自动勾选；
- 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；
- 下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选；
- 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；
上面就是我要实现的功能，我好啰嗦。。。还是看代码吧。。。
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 = []
}
}
}
}
看看效果图：
方法二：直接添加一个【全选】复选框，实现的功能跟方法一是一样的
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;
}
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set(),下面这篇文章主要给大家介绍了关于vue中this.$set()的基本用法实例,需要的朋友可以参考下2023-01-01
这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了vue实现键盘输入支付密码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了vue实现前进刷新，后退不刷新效果,即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。本文给大家分享实现思路，需要的朋友可以参考下2018-01-01
Vue.js 2.0窥探之Virtual DOM到底是什么？
大家可能听说Vue.js 2.0已经发布，并且在其中新添加如了一些新功能。其中一个功能就是“Virtual DOM”。那么下面这篇文章就来给大家详细介绍Vue.js 2.0中的Virtual DOM到底是什么？需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
在Vue中有多种方式可以进行路由跳转并传递参数,这篇文章主要给大家介绍了关于vue路由三种传参方式的相关资料,文中介绍的方法分别包括params传参、query传参(显示传参)以及props传参(路由组件传参),,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue递归实现树形组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Vue3.2 新增指令 v-memo 用法详解(提高性能利器)
v-memo 接受一个依赖的数组，依赖的数组变化，v-memo 所对应的 DOM 包括子集将会重新渲染，这篇文章主要介绍了Vue3.2 新增指令 v-memo 用法，提高性能的又一利器,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了使用Vue.js 和Chart.js制作绚丽多彩的图表，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁，这篇文章主要介绍了关于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以参考下2023-04-04
最新评论