从后端获取数据,前端手动加入‘全选’选项,然后利用watch实现控制全选的效果,点击全选,下面所有选项都选中,取消全选,所有选项都取消选中。
<template>
<div>
<el-form>
<el-form-item label="区域:">
<el-select multiple v-model="salesArea" collapse-tags placeholder='请选择销售区域'>
<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'home',
data(){
return {
salesArea:[],
options:['上海','安徽','湖北','河南','广州','湖南','北京','四川','江西','重庆']
}
},
mounted(){
this.options.unshift('ALL')
},
watch:{
salesArea:{
handler(newValue,oldValue){
if(newValue.includes('ALL') && !oldValue.includes('ALL')){
this.salesArea = this.options
}else if(oldValue.includes('ALL') && !newValue.includes('ALL')){
this.salesArea = []
}else if(oldValue.length === this.options.length && newValue.length !== this.options.length){
this.salesArea.splice(this.salesArea.indexOf('ALL'),1)
}else if(!newValue.includes('ALL') && newValue.length === this.options.length-1){
this.salesArea.push('ALL')
}
}
}
}
}
</script>
<style scoped>
</style>
这是我写的一个demo,大概思路就是这样,通过监听选择框数据的变化来操作。具体的数据处理根据实际需求来实现。