ivew下拉远程搜索

最新推荐文章于 2024-05-08 14:46:24 发布

原创最新推荐文章于 2024-05-08 14:46:24 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

ivew 专栏收录该内容

1 篇文章

订阅专栏

博客展示了手机号选择组件的代码，包含可过滤、清除、远程查询、多选等功能。同时给出了远程查询手机号的js代码，通过发送请求获取匹配的用户数据并更新显示，实现手机号的动态选择。

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

<i-col span="1" offset="8">
<div>手机号(选择):</div>
</i-col>
<i-col> <i-select style="width:200px" v-model="queryParams.mobile"
           filterable
           clearable
           remote
           multiple
           :remote-method="mobileRemote"
           :loading="loading"
           label-in-value
           @on-change="hanleMobileChange"
           placeholder="请输入或选择"
ref="setStyle">
       <i-option v-for="(item, index) in userData" :value="item.phoneNumber" :key="item.phoneNumber" :label="item.phoneNumber">{{item.name}}--{{ item.phoneNumber }}</i-option>
       </i-select>
</i-col>

js
mobileRemote:function(query){
           vm.loading = true;
           $.get(baseURL + "match/selectUserMobile?mobile="+query, function(r){
               vm.loading = false;
               if(r.code == 0)
{

   vm.userData = r.list;
/* for (var i = 0; i < r.list.length; i++) {
   vm.$set(r.list[i], 'Name', r.list[i].phones);
                   }*/
} else
{

}
});
       },