Element-ui中 选择器（select）多选下拉框实现全选功能

Element-ui中 选择器（select）多选下拉框实现全选功能

需求（产品整活）：
需要下拉时候可以一键全选

父组件运用

<template>
  <div>
    <MultipleSelect
      :filterable="false"
      :selectOptions="selectOptions" //数据集合
      :mulSelectLoading="mulSelectLoading" //是否显示loading
      :mulSelecteds="mulSelecteds"// 绑定的值
      labels="schoolName" //自定义label参数
      values="unitId"  //自定义value参数
      @update:updateMultipleSelect="val => mulSelecteds = val">
    </MultipleSelect>
  </div>
</template>
 
<script>
import MultipleSelect from './MultipleSelect.vue';
export default {
  data() { 
    return {
      selectOptions:[],
      mulSelectLoading:false,
      mulSelecteds:[]
    } 
  }, 
  components:{
    MultipleSelect,
  },
  methods: {
    mockData(){
      this.mulSelectLoading = true;
      // 模拟数据
      setTimeout(()=>{
        const options = [
          { label: '上海', value: 'sh' },
          { label: '南京', value: 'nj' },
          { label: '重庆', value: 'cq' },
          { label: '武汉', value: 'wh' },
        ]
        this.selectOptions = options;
        this.mulSelectLoading = false;
        this.mulSelecteds = ['cq','nj'];
      },1500)
    },
  },  
  mounted(){
    this.mockData();
  }
}
</script>  

子组件

<template>
  <el-select 
    size="mini" 
    multiple 
    :filterable="filterable"
    :disabled="disabled"
    v-model='selectedArr' 
    :loading="mulSelectLoading"
    :collapse-tags="collapseTags"
    placeholder='请选择'
    @change='changeSelect' 
    @remove-tag='removeTag'>
    <el-option label='全选' value='全选' @click.native='selectAll' v-if="selectOptions.length"></el-option>
    <el-option v-for='item in selectOptions' :key="item[values]" :label='item[labels]' :value='item[values]'></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'MultipleSelect',
  data() {
    return {
      selectedArr: [],
    }
  },
  props:{
    //自定义label参数
    labels:{
      type:String,
      default(){
        return ''
      }
    },
    //自定义value参数
    values:{
      type:String,
      default(){
        return ''
      }
    },
    // 选项
    selectOptions:{
      type:Array,
      default(){
        return []
      }
    },
    // 是否禁用
    disabled:{
      type:Boolean,
      default:false
    },
    // 已选中选项
    mulSelecteds:{
      type:Array,
      default(){
        return []
      }
    },
    // 加载状态
    mulSelectLoading: {
      type: Boolean,
      default: false,
    },
    // 多选时是否将选中值按文字的形式展示
    collapseTags: {
      type: Boolean,
      default: true,
    },
    // 是否可搜索
    filterable: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    selectAll() {
      if (this.selectedArr.length < this.selectOptions.length) {
        this.selectedArr = []
        this.selectOptions.map((item) => {
          this.selectedArr.push(item.[this.values])
        })
        this.selectedArr.unshift('全选');
      } else {   
        // 取消全选
        this.selectedArr = [];
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    },
    changeSelect(val) {
      if (!val.includes('全选') && val.length === this.selectOptions.length) {
        this.selectedArr.unshift('全选')
      } else if (val.includes('全选') && (val.length - 1) < this.selectOptions.length) {
        this.selectedArr = this.selectedArr.filter((item) => { return item !== '全选'})
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    },
    removeTag(val) {
      if (val === '全选') {
        this.selectedArr = [];
        this.$emit('update:updateMultipleSelect',this.selectedArr);
      }
    }
  },
  watch:{
    mulSelecteds:{
      handler(newVal,oldVal){
        this.selectedArr = newVal;
        if (!this.selectedArr.includes('全选') && 
             this.selectedArr.length && 
             this.selectedArr.length === this.selectOptions.length) 
        {
          this.selectedArr.unshift('全选')
        }
      },
      immediate: true
    }
  }
}
</script>