element-ui select框手动实现全选功能

从后端获取数据，前端手动加入‘全选’选项，然后利用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，大概思路就是这样，通过监听选择框数据的变化来操作。具体的数据处理根据实际需求来实现。