在使用 Element UI 的 Select 想要在多選的時候有全選的功能
這裡我在我自己的 communitys 加入一個全選的 Option ,並且當選擇選項時來做判斷;裡面用到的都是撈完API後的資料
data(){}
//從資料庫撈出來的選項
communitys:[],
//選擇到的選項
selectCommunitys:[],
//在選擇完第一次後在選擇二次的第一次選項
oldOptions:[],
需要提前把全選的資料加入到 communitys
裡面
this.communitys.splice(0,0,{communityName:'全選',id:'0'})
template
加入 @change="selectAll"
當有選擇時就會呼叫這個function<el-select
class="w-100"
v-model="selectCommunitys"
multiple
collapse-tags
placeholder="選擇社區"
@change="selectAll"
>
<el-option
v-for="item in communitys"
:key="item.id"
:label="item.communityName"
:value="item.id"
></el-option>
</el-select>
methods
selectAll(val){
let allCommunity = []
//先把所有的選項都存取起來
for(let item of this.communitys) {
allCommunity.push(item.id)
}
//舊選項裡面沒有全選選項
//新選擇裡面有全選選項
if(this.oldOptions[0] != 0 && val.includes('0')){
//就把所有的選項加入到 selectCommunity 裡面
this.selectCommunitys = allCommunity
}
//舊選項裡面有全選選項
//新選項裡面沒有全選選項
if (this.oldOptions[0] == 0 && !val.includes('0')) {
//把 selectCommunity 裡面的選項設定為空
this.selectCommunitys = []
}
//新舊選項裡面有全選選項
if(this.oldOptions[0] == 0 && val.includes('0')){
const index = val.indexOf('0')
val.splice(index, 1) // 排除全選的選項
this.selectCommunitys = val
}
//舊選項裡面有全選選項
//新選項裡面沒有全選選項
if(this.oldOptions[0] != 0 && !val.includes('0')){
//當選項的長度跟全部選項長度相等減1
if(val.length === allCommunity.length -1){
//全選的選項就加入進去
this.selectCommunitys = ['0'].concat(val)
}
}
把新的所有選擇的選項變成舊的,這樣下一次進來就可以比對
this.oldOptions = this.selectCommunitys
}