基于Element的下拉框，多选框的封装

　　Element是有自己的多选框的，但是，他的两种表现形式不是我们所想要的。所以，就以Element的下拉多选框为基础，封装了一个自己的多选框。废话不多说，直接上图

 1、增加一个全部的功能，然后让选择全部之后，上面的显示框中只显示“全部”两个字

 2、当显示不全的时候，显示省略号

 3、剩下的交互逻辑，就很简单了，点击，全部，让所有的全部选中，点击取消全部，让所有的取消选中

直接来看我封装的组件吧，里面的注释会解释的比较清楚

<template>
  <div id="mySelect" :class="isAll?'isAll':''">
    <el-select
      v-model="searchSelect"
      multiple
      filterable
      placeholder="请选择"
      @change="selectChange"
      popper-class="cheng"
    >
      <el-option
        v-for="item in selectOption"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "mySelect",
  data() {
    return {
      searchSelect: [], // 下拉选择框中的内容
      oldSearchSelect: [], // 原来的下拉框中的内容
      selectOption: [
        
      ],
      isAll:true, // 是不是全选中了
    };
  },
  props: {
    option:{ // 传输过来的数组
      type:Array,
      default:[]
    },
    label:{ // 做一个字典，显示的值
      type:String,
      default:"label"
    },
    value:{ // 做一个字典，实际的值
      type:String,
      default:"value"
    }
  },
  watch:{
    option(){
      if(this.option.length!=0 && this.value in this.option[0] && this.label in this.option[0]){
        this.selectOption.push({
          value: "all",
          label: "全部"
        });
        this.option.map(item=>{
          this.selectOption.push({
            value: item[this.value],
            label: item[this.label]
          })
        })
        this.selectOption.map(item=>{
          this.searchSelect.push(item.value);
          this.oldSearchSelect.push(item.value);
        })
      }
    }
  },
  mounted() {
    // console.log(this.opeion);
  },
  components: {},
  computed: {},
  methods: {

    // 下拉框选择
    selectChange(){
      // console.log(this.searchSelect);
      let oldIndexOfValue = this.oldSearchSelect.indexOf("all");
      let indexOfValue = this.searchSelect.indexOf("all");
      if(oldIndexOfValue!=-1 && indexOfValue!=-1){ // 两个都有ALL,则表示只是去掉了莫一项
        this.searchSelect.splice(indexOfValue,1);
        this.isAll = false;
        this.saveNewSearchSelect();
      }else if(oldIndexOfValue==-1 && indexOfValue!=-1){ // 老数据没有all，新的有的，表明需要全选
        this.searchSelect.splice(0);
        this.oldSearchSelect.splice(0);
        this.isAll = true;
        this.selectOption.map(item=>{
          this.searchSelect.push(item.value);
          this.oldSearchSelect.push(item.value);
        })
      }else if(oldIndexOfValue!=-1 && indexOfValue==-1){ // 老数据有all，但是新的数据没有all，表明需要全不选
        this.searchSelect.splice(0);
        this.oldSearchSelect.splice(0);
        this.isAll = false;
      }else if(oldIndexOfValue==-1 && indexOfValue==-1){ // 两个都没有ALL,表示只是选择了一下，需要判断是不是都选上
        let isAllSelected = false; 
        let allOption = [];
        this.selectOption.map(item=>{
          if(item.value!="all"){
            allOption.push(item.value);
          }
        })
        if(allOption.length == this.searchSelect.length){
          this.isAll = true;
          // this.searchSelect.push("all");
          this.searchSelect.splice(0,0,"all")
          this.saveNewSearchSelect();
        }
      }
    },
    // 保存原来的数据
    saveNewSearchSelect(){
      this.oldSearchSelect.splice(0);
      this.searchSelect.map(item=>{
        this.oldSearchSelect.push(item);
      })
    },
  }
};
</script>
<style lang="scss">
.el-select__tags{
  height: 26px;
  overflow: hidden;
  // text-overflow: ellipsis;
  &>span{
    white-space: nowrap;
    overflow: hidden;
    display: block;
  }
}
.el-select .el-select__tags>span{
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block!important;
  //  70%;
  max- 90%;
}
.el-tag.el-tag--info .el-tag__close{
  display: none;
}
.isAll{
  .el-select .el-select__tags>span{
    span:nth-child(n+2){
      display: none;
    }
  }
}

</style>

使用的方式如下

import mySelect from "@/components/mySelect";

components: {
    mySelect
},

<my-select ref="tenantselect" :option="tenantNameOption" :value="'value'" :label="'label'"/>

//option:为所有的下拉框选项
//value：为实际的 传参
//label:为显示的数据

// 例: 如果你的数据是这样的，var list = [{
//     id:'apple',
//     name:"苹果"
// },{
//     id:'orange',
//     name:"橘子"
// }]

// <my-select ref="tenantselect" :option="list" :value="'id'" :label="'name'"/>
// 获取现在选中的值
// $refs.tenantselect.searchSelect

其中包括，需要传输什么样的参数，然后等到什么结果。