vue+element项目，select组件搜索改变下拉部分选项之后，再次搜索出现键盘上下选择选项时无法按照列表顺序选择怎么办？

Question

vue+element项目

select组件搜索改变下拉部分选项之后，再次搜索出现键盘上下选择选项时无法按照列表顺序选择，而是变成列表顺序还是正常的，但是用键盘的上下选择选项时，会跳过上次搜索出的那项数据，等选择完其他的之后再跳到上次搜索的数据上

尝试过清空搜索出的列表，但是没有用，也看了搜索之后data中列表顺序是对的，但是就是上下键选择时不对，也不报错

相关代码

        <el-select 
          v-model="searchGoodsBatchData" 
          :filter-method="filterGoodsBatchData" 
          filterable 
          default-first-option 
          placeholder="请输入产品名" 
          @change="searchGoods"
          @keyup.native = "showGoodsBatch($event)" 
          :disabled="searchBoxDisable"
          popper-class = "searchGoodsBatchInput"
          id="searchGoodsBatchInput"
          ref="searchGoodsBatchInput"
          v-focus="false" clearable>
          <template slot = "prefix">
            <svg-icon icon-class="searchGreen"></svg-icon>
          </template>
          <template>
            <div class = "searchHeader" v-show="showGoodsBatchOption">
              <span style="float: left">商品编号</span>
              <span style="float: left;">69码</span>
              <span style="float: left;">商品名称</span>
              <span style="float: left;">生产厂商</span>
            </div>
          </template>
          <el-option
            class="searchGoodsOption"
            v-for="item in goodsListData"
            :key="item.commodityCode"
            :label="item.name"
            :value="item.commodityCode"
            v-show="showGoodsBatchOption"
            >
            <span style="float: left">{{ item.commodityCode }}</span>
            <span style="float: left;">{{ item.SixNineCode }}</span>
            <span style="float: left;">{{ item.name }}</span>
            <span style="float: left;">{{ item.manufactor }}</span>
          </el-option>
        </el-select>

js部分

filterGoodsBatchData(v) {
  this.searchGoodsBatchData = v
  this.goodsListData = []
  console.log('搜索之前先清空', this.goodsListData)
  this.goodsListData = this.copyGoodsListData.filter((item) => {
    const val = v.toLowerCase()
    if (item.commodityCode.indexOf(val) !== -1) return true
    if (item.SixNineCode.indexOf(val) !== -1) return true
    if (item.name.indexOf(val) !== -1) return true
    if (item.manufactor.indexOf(val) !== -1) return true
  })
  console.log('搜索之后', this.goodsListData)
},

请问各位这是要怎么才能解决呢？

百度了两天了都没找到对应的答案

Answer 1

这个是Element-UI Select组件自身的bug，它官方网站给出的案例也是这样的情况，建议自己封装组件实现特殊功能，灵活性更大。

Answer 2

你需要设置个中间变量来接收你搜索的值,你的原始数据是不能动的

<el-select class="selectTab" v-model="searchValue" filterable :filter-method="userFilter" clearable>
            <el-option v-for="item in userDataTemp" :key="item.userId" :label="item.username" :value="item.userId">
                <span style="float: left">{{ item.username }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userId }}</span>
            </el-option>
        </el-select>

userFilter(query = "") {
                let arr = this.dataList.filter(item => {
                    return (
                        item.username.indexOf(query) != -1 || item.userId.indexOf(query) != -1
                    );
                });
                this.userDataTemp = arr;
            },

Answer 3

检索后，给option赋值为空数组，然后再赋值为新数组就能解决这个bug了。原因可能是排序问题导致的