elementui 自定义下拉框内容搜索问题

104 阅读1分钟

vue3 elementUi的下拉框如果在自定义下拉框内容时要进行搜索功能正常处理会出现搜索结果不对的情况,但是此时js输出的数据为正确数据

 <el-select v-model="form.xxx" placeholder="" size="large" filterable :filter-method="xxxFilter">
        <el-option v-for="item in result" :key="item.id" :label="item.xxx" :value="item.xxx">
          <div>
            {{ `${item.xxx}(+${item.xxx2})` }}
          </div>
        </el-option>
  </el-select>

正确处理方式,先清空列表,await nextTick() 在进行赋值,亲测有效

const xxxFilter = async (keyword)=>{
  if(!keyword) {
      xxxx  //赋值全部数据
  }
  const filtered = xxx //赋值满足条件数据

  // 强制清空再赋值,触发响应式更新
  result.value = []
  await nextTick()
  result.value = filtered
}