遇到問題

在使用 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
}

參考資料

下拉列表多選 问题
回上一頁
回下一頁