el-select 下拉框多選實(shí)現(xiàn)全選的實(shí)現(xiàn)
更新時(shí)間：2019年08月02日 10:30:39 作者：十一
這篇文章主要介紹了el-select 下拉框多選實(shí)現(xiàn)全選的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在寫一個(gè)功能時(shí)發(fā)現(xiàn)el-select支持多選，但是竟然不支持全選，好無語哦，那就自己實(shí)現(xiàn)一下吧~有兩種方法，第二種感覺簡(jiǎn)單些
方法一：下拉項(xiàng)增加一個(gè)【全選】，然后應(yīng)該有以下幾種情況：
- 下拉選項(xiàng)全都勾選時(shí)，【全選】自動(dòng)勾選；
- 下拉選項(xiàng)部分勾選時(shí)，點(diǎn)擊【全選】后，所有下拉項(xiàng)全部勾選；
- 下拉選項(xiàng)全都未勾選時(shí)，點(diǎn)擊【全選】后，所有下拉選項(xiàng)不勾選；
- 下拉選項(xiàng)和【全選】都選上的時(shí)候，不勾選任意下拉選項(xiàng)，【全選】按鈕就不勾選了；
上面就是我要實(shí)現(xiàn)的功能，我好啰嗦。。。還是看代碼吧。。。
html部分：
<template> <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' @remove-tag='removeTag' placeholder='請(qǐng)選擇'> <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 = []
}
}
}
}
看看效果圖：
方法二：直接添加一個(gè)【全選】復(fù)選框，實(shí)現(xiàn)的功能跟方法一是一樣的
html部分：
<template> <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder='請(qǐng)選擇'> <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;
}
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近工作上經(jīng)常操作數(shù)組數(shù)據(jù),并且要求實(shí)時(shí)更新視圖數(shù)據(jù),這個(gè)時(shí)候首先想到的是?vue.set(),下面這篇文章主要給大家介紹了關(guān)于vue中this.$set()的基本用法實(shí)例,需要的朋友可以參考下2023-01-01
el-upload大文件切片上傳實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了el-upload大文件切片上傳實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鍵盤輸入支付密碼功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新效果
這篇文章主要介紹了vue實(shí)現(xiàn)前進(jìn)刷新，后退不刷新效果,即加載過的界面能緩存起來（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進(jìn)入時(shí)重新加載）。本文給大家分享實(shí)現(xiàn)思路，需要的朋友可以參考下2018-01-01
Vue.js 2.0窺探之Virtual DOM到底是什么？
大家可能聽說Vue.js 2.0已經(jīng)發(fā)布，并且在其中新添加如了一些新功能。其中一個(gè)功能就是“Virtual DOM”。那么下面這篇文章就來給大家詳細(xì)介紹Vue.js 2.0中的Virtual DOM到底是什么？需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
在Vue中有多種方式可以進(jìn)行路由跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要給大家介紹了關(guān)于vue路由三種傳參方式的相關(guān)資料,文中介紹的方法分別包括params傳參、query傳參(顯示傳參)以及props傳參(路由組件傳參),,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)樹形組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3.2?新增指令?v-memo?用法詳解(提高性能利器)
v-memo 接受一個(gè)依賴的數(shù)組，依賴的數(shù)組變化，v-memo 所對(duì)應(yīng)的 DOM 包括子集將會(huì)重新渲染，這篇文章主要介紹了Vue3.2?新增指令?v-memo?用法，提高性能的又一利器,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，該組件將不會(huì)銷毀，這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下2023-04-04