第一種 點選搜尋

          <el-select class="mr10" style="width:150px;" v-model="valueType" placeholder="請選擇考核型別"
  :loading="selectLoading" 
         >
            <el-input v-model="searchSelect" size="small" placeholder="請輸入搜尋內容">
                <el-button slot="append" icon="el-icon-search"
 
 @click="searchSelectGet"></el-button>
            </el-input>
            <el-option label="考核型別" :value="0"></el-option>
            <el-option
              v-for="item in optionsType"
              :key="item.key"
              :label="item.value"
              :value="item.key"
 

            ></el-option>
          </el-select>

searchSelectGet(){
模擬非同步請求
      let arr=[...this.optionsType]
      arr.splice(0,1);
       this.selectLoading = true;
      setTimeout(() => {
        this.selectLoading = false;
        this.optionsType=arr;
      }, 2000);
    }

第二種 遠端搜尋

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="請輸入關鍵詞"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado","Wyoming"]
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: item, label: item };
      });
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
  }
</script>

第三種懶載入

<template>
  <el-select
    v-model="value"
    placeholder="請選擇"
    filterable
    multiple
    v-el-select-loadmore="loadmore"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.id">
    </el-option>
  </el-select>
</template>
 
export default {
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 獲取element-ui定義好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
          * scrollHeight 獲取元素內容高度(只讀)
          * scrollTop 獲取或者設定元素的偏移值,常用於, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值預設為0.
          * clientHeight 讀取元素的可見高度(只讀)
          * 如果元素滾動到底, 下面等式返回true, 沒有則返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  data() {
    return {
      value: '',
      options: [],
      formData: {
        pageIndex: 1,
        pageSize: 20,
      }
    };
  },
  mounted() {
    this.getList(this.formData);
  },
  methods: {
    loadmore() {
      this.formData.pageIndex++;
      this.getList(this.formData);
    },
    getList(formData) {
      // 這裡是介面請求資料, 帶分頁條件
      const _res = [1, 2, 3]; // 請求得到的資料
      this.options = [...this.options, ..._res];
    }
  }
};