el-select 的远程搜索 如何回显?

1、下拉框的区域代码

    <el-form-item label="选择内容" prop="region" :rules="[
                    { required: true, message: '选择内容', trigger: 'blur' },
                    ]">
       <el-select v-model="form.region" value-key="collId"  
                remote clearable filterable :remote-method="remoteMethod" 
                placeholder="请选择" 
                :loading="loading">
                        <el-option
                            v-for="item in regions"
                            :key="item.collId"
                            :label="item.domain"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>

2、解决编辑回显问题

我这里的model值是一个对象,所以回显的时候,让form.region的值等于要回显的对象数据,

然后在 regions 这个数组里面放入要回显的对象数据

这样就可以正常回显了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
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 = []; } }, }, }; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qing_xing_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值