<template>
<el-select v-model="selectedOptions" multiple @change="changeAll" style="width:100%">
<el-checkbox v-model="checkedAll" @change="selectAll" style="margin-left:10px">全选</el-checkbox>
<el-checkbox v-model="checkedReverse" @change="reverseSelect">反选</el-checkbox>
<el-option v-for="option in options" :key="option.id" :label="option.name" :value="option.name"></el-option>
</el-select>
</template>
<script>
export default {
data(){
return{
options: [{
id: '选项1',
name: '黄金糕'
}, {
id: '选项2',
name: '双皮奶'
}, {
id: '选项3',
name: '蚵仔煎'
}, {
id: '选项4',
name: '龙须面'
}, {
id: '选项5',
name: '北京烤鸭'
}],
checkedAll:false,
checkedReverse:false,
selectedOptions:[]
}
},
methods:{
selectAll(){
if (this.checkedAll) {
this.checkedReverse=false;
this.selectedOptions=this.options.map(option=>option.name)
}else{
this.selectedOptions=[]
}
},
changeAll(){
if (this.selectedOptions.length==this.options.length) {
this.checkedAll=true
}else{
this.checkedAll=false
};
if (this.checkedReverse) {
this.checkedReverse=false
}
},
reverseSelect(){
this.selectedOptions=this.options.filter((option)=>!this.selectedOptions.includes(option.name))
.map((option)=>option.name);
if (this.selectedOptions.length==this.options.length) {
this.checkedAll=true
}else{
this.checkedAll=false
}
}
}
}
</script>
<style>
</style>