基於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;
  // width: 70%;
  max-width: 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

其中包括，需要傳輸什么樣的參數，然后等到什么結果。