le-select 下拉多选+搜索+全选

<template>
    <el-form-item 
    	:label="object.name"
    	:required="object.required ? true : false">
      <el-select 
        v-model="objectValue[object.id]" 
        size="small" 
        multiple
        filterable 
        popper-class="select-search-box"
        class="selectMaxWidth"
        :class="!requiredState?'requiredFaild':''"
      	:disabled="object.disabled||!edit" 
        loading-text="加载中…"
        :loading="loading"
        @visible-change="clearSearchVal"
        @change="selectAll"
        :placeholder="object.placeholder || '请选择'">
        <div class="ty-filter-wrap">
          <el-input
            placeholder="请输入"
            v-model="searchTxt"
            class="el-icon-search"
            clearable>
          </el-input>
        </div>
        <el-option
        v-for="item in optionData"
        :key="item.value"
        :label="item.display"
        :value="item">
        </el-option>  
  </el-select>
  </el-form-item>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      searchTxt:'',
      optionData:[],
      oldOptions:[],
      isContainAll: false
	  }
  },
  props:{
    object:Object,
    objectValue: Object
  },
  created() {
    if(!this.objectValue[this.object.id]){
      this.$set(this.objectValue,this.object.id)
    }
    if(!this.object.selectDetail){
      this.$set(this.object,'selectDetail',[])
    }
  },
  computed:{
    requiredState(){
      if(this.object.required&&!this.object.disabled&&this.edit){
        var status = this.required(this.object,this.objectValue[this.object.id])
        this.$emit("required",status)
        return status
      }else{
        return true
      }
    },
    edit(){
      return this.$store.state.edit
    }
  },
  mounted() {
    // if(this.objectValue[this.object.id].length === 0){
    //   this.objectValue[this.object.id] = [{display: "全部", value: "ALLDEPAER"}];
    // }
  },
  watch:{
    objectValue(){
      this.getMobackData();
    },
    searchTxt(val){
      if(val) this.optionData = this.object.selectDetail.filter(item=>//object
       item['display'].toLowerCase().search(val.toLowerCase()) != -1
      );
      else this.optionData = this.object.selectDetail;//object
    },
    'object.selectDetail'(val){
        this.optionData = val; //object
    }
  },
  methods: {
    getMobackData:function(){
      if(!this.object.selectDetail.length){
        this.object.selectDetail=this.objectValue[this.object.id]
      }
    },
    clearSearchVal(val){
      if(!val) this.searchTxt ='';
    },
    selectAll(val) {
      var  defaultSelect = [{display: "全部", value: "ALLDEPAER"}];
      if (this.isContainAll) {
        this.isContainAll = false;
        this.objectValue[this.object.id].splice(0, 1)
      } else {
        this.isContainAll = val.some(item => item.value === 'ALLDEPAER');
        if (this.isContainAll) {
          this.objectValue[this.object.id] = defaultSelect;
        } else {
          if(this.object.selectDetail&&this.object.selectDetail.length) 
           if (val.length === this.object.selectDetail.length - 1) {
            this.objectValue[this.object.id] = defaultSelect;
            this.isContainAll = true
           }
        }
      }
      // if (val.length === 0) {
      //   this.objectValue[this.object.id] = defaultSelect
      //   this.isContainAll = true
      // }
      // 如果选择全部
      if (this.isContainAll === true) {
        this.oldOptions = defaultSelect;
      } else {
        // 获得选中
        for (let i = 0; i < val.length; i++) {
          let obj = this.optionData.find((item) => {
            return item.value === val[i]
          })
          this.$set(this.oldOptions, i, obj);
        }
      }
    //   const allValues = [];
    //   var ALLDEPAER = this.optionData.filter(item => item.value === 'ALLDEPAER');
    //   for (const item of this.optionData) {
    //     allValues.push(item);
    //   }
    //   const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : [];

    //   if (val.some(item => item.value === 'ALLDEPAER')) this.objectValue[this.object.id] = allValues;
    //   if (oldVal.some(item => item.value === 'ALLDEPAER') && !val.some(item => item.value === 'ALLDEPAER')){
    //     this.objectValue[this.object.id] = [];
    //   }
    //   if (oldVal.some(item => item.value === 'ALLDEPAER') && val.some(item => item.value === 'ALLDEPAER')) {
    //     val = val.filter(item => item.value != 'ALLDEPAER');
    //     this.objectValue[this.object.id] = val;
    //   }
    //   if (!oldVal.some(item => item.value === 'ALLDEPAER') && !val.some(item => item.value === 'ALLDEPAER')) {
    //     if (val.length === allValues.length - 1)
    //       this.objectValue[this.object.id] = [...ALLDEPAER,...val];
    //    }
    //   this.oldOptions[0] = this.objectValue[this.object.id];    
    }
  }
};
</script>
<style lang="less">
.select-search-box {
  padding-top:35px;
  .el-scrollbar{
    display:block !important;
    overflow: initial!important;
  }
  .ty-filter-wrap{
      position: absolute;
      top: -35px;
      border-radius: 3px 3px 0 0;
      left:0;
      background: #fff;
      height:35px; 
      box-sizing: content-box;
      border-bottom:1px solid #e2e2e2;
      z-index: 9;
      width: 100%;
      background: #fff;
    .el-icon-search{
      margin-top:3px;
    }
  }
  .el-input{
    &::before{
      color: #909399;
      display: inline-block;margin-left:10px;
    }
    input{
      border:0;
      width: 80%;
      padding:0 10px 0 5px
    }
  }
}

// .selectMaxWidth{
//   .el-select__tags{
//     .el-tag:first-child{
//         max-width:200px !important;
//         .el-select__tags-text{
//           display: inline-block;
//           max-width: 130px;
//           overflow: hidden;
//           vertical-align: middle;
//           text-overflow: ellipsis;
//       }
//     }
//   }
// }
</style>

转载于:https://my.oschina.net/u/4099729/blog/3068740