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