Element-ui select远程搜索

最新推荐文章于 2025-03-25 10:29:13 发布

没有社保的码农

最新推荐文章于 2025-03-25 10:29:13 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/FanZaiYo/article/details/132757356

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用el-select组件实现远程搜索功能，包括设置可搜索属性、定义远程搜索方法以及处理数据筛选。着重展示了在JavaScript中如何与数据绑定和处理模糊查询的操作。

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

template部分:

       <el-form-item label="用户" prop="userId">
          <el-select
            v-model="temp.userId"
            placeholder="用户"
            filterable
            remote
            :reserve-keyword="false"
            :remote-method="remoteMethod"
            :loading="loading"
            class="filter-item">
            <el-option
              v-for="item in userIdList"
              :key="item.key"
              :label="item.value"
              :value="item.key"/>
          </el-select>
        </el-form-item>

filterable: 是否可搜索

remote: 是否为远程搜索

remote-method: 远程搜索方法

reserve-keyword：多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词

js：

data: {
      //筛选完的部门列表信息
      userIdFilter:[],
      // 用来下拉列表模糊查询
      userIdList:[],
}

methods: {
    getUserIdList() {
      this.listLoading = true
      queryAllUser().then(res => {
        this.userIdFilter = res.data
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.userIdList = this.userIdFilter.filter(item => {
            return item.value.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.userIdList = [];
      }
    },
}

要注意option中应该对应的是用来下拉列表模糊查询

js中return item.value.toLowerCase()的值要与上方对应