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

Posted 2021-09-21 明天也要努力

需求：

选择器组件（Select）支持多选，但是不支持全选。如果需要实现这个功能，该怎么修改呢？

方案一：下拉项增加一个【全选】，实现以下几种功能

• 下拉选项全都勾选时，【全选】自动勾选；
• 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；
• 下拉选项全都勾选时，点击【全选】后，所有下拉选项不勾选；
• 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；

效果：

方案二：直接添加一个【全选】复选框，实现的功能与方案一相同

效果：

完整代码

父组件

<template>
  <div>
    <MultipleSelect
      :selectOptions="selectOptions"
      :mulSelectLoading="mulSelectLoading"
      :mulSelecteds="mulSelecteds"
      @update:updateMultipleSelect="val => mulSelecteds = val">
    </MultipleSelect>

    <MultipleSelect2
      :selectOptions="selectOptions2"
      :mulSelectLoading="mulSelectLoading2"
      :mulSelecteds="mulSelecteds2"
      @update:updateMultipleSelect="val => mulSelecteds2 = val">
    </MultipleSelect2>
  </div>
</template>
 
<script>
import MultipleSelect from './child.vue';
import MultipleSelect2 from './child2.vue'
export default {
  data() { 
    return {
      selectOptions:[],
      mulSelectLoading:false,
      mulSelecteds:[],
      selectOptions2:[],
      mulSelectLoading2:false,
      mulSelecteds2:[],
    } 
  }, 
  components:{
    MultipleSelect,
    MultipleSelect2,
  },
  methods: {
    mockData(){
      this.mulSelectLoading = true;
      this.mulSelectLoading2 = 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'];
        this.selectOptions2 = options;
        this.mulSelectLoading2 = false;
        this.mulSelecteds2 = ['cq','nj'];
      },1500)
    },
  },  
  mounted(){
    this.mockData();
  }
}
</script>  

方案一：

<template>
  <el-select 
    size="mini" 
    multiple 
    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.value' :label='item.label' :value='item.value'></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'MultipleSelect',
  data() {
    return {
      selectedArr: [],
    }
  },
  props:{
    // 选项
    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   
    }
  },
  methods: {
    selectAll() {
      if (this.selectedArr.length < this.selectOptions.length) {
        this.selectedArr = []
        this.selectOptions.map((item) => {
          this.selectedArr.push(item.value)
        })
        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>

方案二：

<template>
  <el-select 
    size="mini" 
    multiple 
    filterable
    :disabled="disabled"
    :loading="mulSelectLoading"
    :collapse-tags="collapseTags"
    v-model='selectedArr' 
    placeholder='请选择'
    @change='changeSelect' >
    <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
    <el-option v-for='item in selectOptions' :key='item.value' :label='item.label' :value='item.value'></el-option>
  </el-select>
</template>


<script>
export default {
  data() {
    return {
      checked: false,
      selectedArr: [],
    }
  },
  props:{
    // 选项
    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   
    }
  },
  methods: {
    selectAll() {
      this.selectedArr = [];
      if (this.checked) {
        this.selectOptions.forEach((item) => { this.selectedArr.push(item.value )});
      } else {
        this.selectedArr = [];
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    },
    changeSelect(val) {
      if (val.length === this.selectOptions.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    }
  },
  watch:{
    mulSelecteds:{
      handler(newVal,oldVal){
        this.selectedArr = newVal;
        if (this.selectedArr.length && 
            this.selectedArr.length === this.selectOptions.length) 
        {
          this.checked = true;
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-checkbox {
  text-align: right;
  width: 90%;
}
</style>