elementui 使用 select远程搜索回显

问题描述:这一周,遇到的一个普遍的问题,就是一些远程搜索的下拉框,在编辑的时候,没有回显成功,都是直接把id显示出来。

 

为什么会造成这种原因呢?其实,是因为这个远程搜索,他是通过我们输入的值去远程搜索的,当回显的时候,我们只拿了一个id回到前端,又没有输入,造成这个select的数组是空的,所以它就只会显示出一个id,只需要给这个select填充一个数组,那么,它就会帮我们把对应的id给选上。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
el-select 远程搜索回显的实现需要以下步骤: 1. 使用 el-select 的 remote 方法来实现远程搜索功能; 2. 在 remote 方法中,将搜索关键字作为参数传递给后端接口,并获取接口返回的搜索结果; 3. 在 el-select 的 filterable 属性中设置为 true,开启搜索功能; 4. 在 el-select 的 remote-method 属性中设置一个函数,用于在搜索时调用 remote 方法并更新 el-select 的下拉列表的选项; 5. 在 remote 方法中,将后端接口返回的搜索结果映射为 el-select 的下拉列表选项,并将这些选项作为参数传递给 remote 方法的回调函数; 6. 在回调函数中,更新 el-select 的下拉列表的选项。 以下是一个示例代码: ```html <el-select v-model="value" remote filterable :remote-method="getOptions" :loading="loading" > <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" /> </el-select> ``` ```javascript export default { data() { return { value: '', options: [], loading: false, }; }, methods: { getOptions(query) { if (query !== '') { this.loading = true; // 调用后端接口获取搜索结果 this.$http.get('/api/search', { params: { q: query } }).then(res => { this.loading = false; // 将搜索结果映射为 el-select 的下拉列表选项 const options = res.data.results.map(result => ({ value: result.id, label: result.name, })); // 调用回调函数更新 el-select 的下拉列表的选项 this.options = options; }); } else { this.options = []; } }, }, }; ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值