el-select 1.4.x版本實現2.x.x版本的reserve-keyword功能

今天在維護之前的項目時，發現了一個小bug，其實也不算是bug，只是客戶對這個控件的體驗不是很滿意。

咱們在element 2.x.x的版本的官方文檔中能夠發現el-select組件的屬性中比1.x.x的版本多了不少新的屬性，其中的reserve-keyword屬性，正好是客戶想要實現的效果。

 

1.x.x版本的el-select標籤在支持搜索和多選的狀況下，輸入搜索關鍵字，在選中一個選項後仍會保留當前的搜索關鍵字。這個是客戶不想要的效果，並且也不能升級element的版本（怕出現其它的問題），那沒辦法只能改咯。

一開始我也沒什麼頭緒，甚至還想過用css的樣式去控制什麼的，最終造成的效果都不是很好。實在沒辦法只能去看el-select組件的源碼，看看能不能幫我找到靈感。

如下是我在網上找到的el-select組件的template源碼：

<template>
  <div>
    <!-- 多選 -->
    <div
      v-if="multiple"
      ref="tags">
      <!-- collapse tags 多選時是否將選中值按文字的形式展現 -->
      <span v-if="collapseTags && selected.length">
        <el-tag
          type="info"
          disable-transitions>
          <span class="el-select__tags-text">{{ selected[0].currentLabel }}</span>
        </el-tag>
        <el-tag
          v-if="selected.length > 1"
          type="info"
          disable-transitions>
          <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
        </el-tag>
      </span>
      <!-- 多選，多個 el-tag 組成 -->
      <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
        <el-tag
          v-for="item in selected"
          :key="getValueKey(item)"
          type="info"
          disable-transitions>
          <span class="el-select__tags-text">{{ item.currentLabel }}</span>
        </el-tag>
      </transition-group>
      <!-- 可輸入文本的查詢框 -->
      <input
        v-model="query"
        v-if="filterable"
        ref="input">
    </div>
    <!-- 顯示結果框 read-only -->
    <el-input
      ref="reference"
      v-model="selectedLabel">
      <!-- 用戶顯示清空和向下箭頭 -->
      <i slot="suffix"></i>
    </el-input>
    <!-- 下拉菜單 -->
    <transition>
      <el-select-menu
        ref="popper"
        v-show="visible && emptyText !== false">
        <el-scrollbar
          tag="ul"
          wrap-class="el-select-dropdown__wrap"
          view-class="el-select-dropdown__list"
          ref="scrollbar"
          v-show="options.length > 0 && !loading">
          <!-- 默認項（建立條目） -->
          <el-option
            :value="query"
            created
            v-if="showNewOption">
          </el-option>
          <!-- 插槽，用於放 option 和 option-group -->
          <slot></slot>
        </el-scrollbar>
        <!-- loading 加載中文本 -->
        <p
          v-if="emptyText &&
            (!allowCreate || loading || (allowCreate && options.length === 0 ))">
          {{ emptyText }}
        </p>
      </el-select-menu>
    </transition>
  </div>
</template>

其中最重要的就是實現搜索功能的這一段代碼：

<!-- 可輸入文本的查詢框 -->
<input v-model="query" v-if="filterable" ref="input">

能夠看到搜索文本框的值實際上是綁定在query的屬性上，那就簡單多了，我只要每次選擇完下拉框選項中的某一項後，清空query屬性不就好了麼。如下是實現代碼：

<el-select v-model="value" multiple placeholder="請選擇" filterable  @change="onSelectChange" ref="el-select">
      <el-option label="黃金糕" value="黃金糕"></el-option>
      <el-option label="龍鬚麪" value="龍鬚麪"></el-option>
      <el-option label="北京烤鴨" value="北京烤鴨"></el-option>
</el-select>

onSelectChange() {
       this.$refs['el-select'].query = '';
}

最重要的就是，取到經過vue的ref獲取到el-select這個組件對象，並在el-select的change回調函數中，將query的值設爲空就好了。