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

希途
  • 9

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)
},

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

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

回复
阅读 4k
2 个回答

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

rangowu
  • 1
新手上路,请多包涵

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

<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;
            },
宣传栏