el-select实现全选功能_el-select 全选

思路：1、下拉选项增加全部，value为其余选项value的值用逗号拼接

 2、处理多选情况其他选项与全部选项的互斥功能

<template>
  <div>
    <el-select  v-model="selectedOptions" :multiple="multipleType" @change="selectedChange">
      <!-- <el-checkbox v-show="!selectAll" class="all-sele" v-model="selectAll" @change="toggleSelectAll">全部</el-checkbox> -->
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>
 
<script>
/* eslint-disable */ 
export default {
  data() {
    return {
      // selectAll: false,
      multipleType:true,
      selectedOptions: [],
      options: [
        { label: '全部', value: '1,2,3' },
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' },
      ],
    };
  },
 
  computed: {
  },
  created(){
 
  },
  watch: { },
  methods: {
    selectedChange(val) {
      if(!this.multipleType){
        return false
      }
      let curData=this.options.find(a=>a.label=='全部')
      if(val.length>1&&val.includes(curData.value)){
        let allIndex=val.findIndex(a=>a==curData.value)
        if(allIndex==0){
          this.selectedOptions.splice(0,1)
        }else{
          this.selectedOptions=[curData.value]
        }
      }else if(val.join(',')==curData.value){
        this.selectedOptions=[curData.value]
      }
    }
    
  },
};
</script>
<style lang="less"  scoped>
.all-sele /deep/ .el-checkbox__input{
  opacity: 0;
}
</style>