遇到问题

在使用 Element UI 的 Select 想要在多选的时候有全选的功能

解决方法

这里我在我自己的 communitys 加入一个全选的 Option ，并且当选择选项时来做判断；里面用到的都是捞完API后的资料

//从资料库捞出来的选项communitys:[],//选择到的选项selectCommunitys:[],//在选择完第一次后在选择二次的第一次选项oldOptions:[],

需要提前把全选的资料加入到 communitys 里面

this.communitys.splice(0,0,{communityName:'全选',id:'0'})

<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>

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}

参考资料

下拉列表多选 问题
回上一页
回下一页