记一次el-select远程搜索默认数据回显问题

ZemanZhang

已于 2022-07-30 01:15:27 修改

阅读量5k

点赞数 6

分类专栏：前端 # vue 文章标签： vue.js 前端 javascript elementui

于 2022-05-27 13:59:06 首次发布

本文链接：https://blog.youkuaiyun.com/qingfeng2020/article/details/125002466

版权

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

本文介绍了解决Element UI中el-select组件远程搜索功能的回显问题的方法。通过在数据初始化时对获取的数据进行处理，并添加到本地select组件中，确保已选择项能够正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在el-select远程搜索中会有个回显问题

就是明明传入了绑定值但是却会显示不出来

解决代码如下

			<el-select
                v-model="ruleForm.selectId"
                filterable
                remote
                ref="select"
                clearable
                reserve-keyword
                placeholder="请输入问卷名称/id进行搜索"
                :remote-method="search">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
              </el-option>
            </el-select>

在数据初始化的时候将获取到的数据做进一步的处理，进行本地select组件的一个添加

		this.$refs.select.cachedOptions.push({
            currentLabel: currentTitle, // 	当前绑定的数据的label
            currentValue: currentId, // 当前绑定数据的value
            label: currentTitle, // 当前绑定的数据的label
            value: currentId // 当前绑定数据的value
        })