vue el-select远程搜索

最新推荐文章于 2024-08-02 23:39:24 发布

sunlizhen

最新推荐文章于 2024-08-02 23:39:24 发布

阅读量4.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sunlizhen/article/details/104308789

版权

本文介绍如何在Vue.js应用中使用Element UI的EL-Select组件实现远程数据搜索功能。通过监听用户输入并发送请求到服务器，动态加载匹配的选项，提升用户体验。

摘要由CSDN通过智能技术生成

<el-select
  v-model="listQuery.userId"
  :remote-method="remoteMethod"
  filterable
  remote
  clearable
  placeholder="请输入"
>
  <el-option
    v-for="item in options"
    :key="item.id"
    :label="item.nickname"
    :value="item.userId"
  ></el-option>
</el-select>

data() {
 return{
   options: [],
 }

}

methods:{
 remoteMethod(query) {
  if (query !== '') {
    var restaurants = getUserGroupList({
      nameOrStaffNum: query
    }).then(res => {
      return res.data;
    });
    this.options = query
      ? restaurants.filter(this.createStateFilter(query))
      : restaurants;
  } else {
    this.options = [];
  }
},
 querySearchAsync(queryString, cb) {
  var restaurants =  getUserGroupList({
    nameOrStaffNum: queryString
  }).then(res => {
    return res.data;
  });
  var results =