elementui select 可异步搜索可选择可输入

这篇博客探讨了Vue.js中使用el-select组件进行异步数据加载的实现方式,包括远程搜索、模糊匹配和防抖处理。通过watch监听搜索关键字变化,实现了动态加载运营商数据,并在选择时更新表单模型。同时,文章还介绍了如何处理选中值的变更和失去焦点时的响应。

可输入后异步搜索

可输入自定义内容

<div >
    <el-select v-model="editForm.mcc" clearable filterable remote reserve-keyword placeholder="请选择" class="ele-block" 
                :remote-method="addRemoteMccName" :loading="loading" @clear="addRemoteMccName" @change="selectChange"  @blur="selectBlur">
     <el-option v-for="(item,index) in addOperatorList"  :key="index" :label="item.mcc_mnc" :value="item.mcc_mnc"> </el-option>
     </el-select>
 </div>

 

 data() {
    return {
      editForm: {},  // 表单数据
      operatorList:[], //
      form: {
        search: '',
        type:''
      },
      lo
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值