vue+element实现下拉框的远程搜索功能

最新推荐文章于 2024-04-21 02:04:10 发布
最新推荐文章于 2024-04-21 02:04:10 发布
阅读量583 收藏 2
点赞数
分类专栏： vue+elementUI 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46276411/article/details/120946540
版权
本文介绍了如何使用Vue.js结合ElementUI组件库，实现下拉框的远程搜索功能。通过定义template、computed属性、data以及methods，实现了从服务器获取并展示搜索结果的功能。
摘要由CSDN通过智能技术生成

template

<el-dialog title="添加用户" class="adduser" :visible.sync="showaddUser" width="500px" @close='close("addUser")' :close-on-click-modal="false"
      :close-on-press-escape="false">
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
    <el-form-item prop="nickNameList">
      <el-select
      ref="select"
        v-model="ruleForm.nickNameList"
        multiple
        filterable
        collapse-tags
        remote
        @focus="focus"
       :remote-method="remoteMethod"
        style="width:90%;margin-left:20px"
        placeholder="请选择用户名，
最低0.47元/天 解锁文章
weixin_46276411
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
Vue el-autocomplete组件对于实现一个具备远程搜索和自动填充功能的下拉框非常有效，为用户提供良好的交互体验。通过本文的介绍和代码示例，读者应该能够掌握如何在自己的Vue项目中实现这一功能。在实际应用过程中，...
elementui中el-select实时搜索渲染下拉框（可多选对象）
ss_Tina的博客
04-28 2433
el-select多选，实时输入后调用后端模糊查询接口，赋值在下拉选项里面。
element-ui输入框下拉远程搜索
m0_67750137的博客
01-10 1313
element-ui输入框下拉远程搜索（后端已经配置模糊匹配）
vue el-select下拉框，远程搜索+滚动触底加载
weixin_45901950的博客
06-30 1419
2、v-el-select-loadmore=“that” 封装的触底监听指令，that传给指令的this；3、“isLoad?‘selectLoad’ : ‘selectSucc’” 提示有数据还是已经加载完了。1、:remote-method=“remoteMethod” 远程搜索；控制加载中/没有更多样式。
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
热门推荐
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
HTML实现下拉框远程搜索可输入
qq_51657546的博客
06-09 1952
HTML实现下拉框远程搜索可输入
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
3. **远程搜索**：通过监听`input` 事件，结合`loading` 属性，可以实现远程数据加载的下拉框。 4. **分组选项**：使用`el-option-group` 组件，可以对选项进行分组展示。 在实际开发中，你可能需要结合实际业务...
基于element-ui封装可搜索的懒加载tree组件的实现
11-20
远程搜索功能通常借助于`el-select`的远程搜索功能来实现。搜索时，我们需要根据输入的关键词获取匹配的节点，并将这些节点插入到Tree组件中。返回的数据结构需要包含搜索结果以及它们的父节点直至根节点，确保Tree...
element-ui的两种远程搜索实现
lovecoding1的博客
04-06 4562
element-ui的两种远程搜索实现
Vue(ElementUI)封装远程下拉框组件
m0_61820867的博客
07-24 1141
Vue(ElementUI)封装远程下拉框组件，可以通过子组件清空
el-select 远程搜索+懒加载
jl____的博客
09-21 5541
使用Element-UI的下拉框功能，实现远程搜索和懒加载功能。
element UI-远程搜索（el-select）
JustDI0209的博客
12-31 6681
1.需求 表单项需具有搜索功能，并以下拉选的形式展现 2.实现 <template> <div class="medicalRecord"> <div class="main-content" v-if="!taskDetail"> <div class="content-top"> <el-fo...
Vue2 + element ui el-select 远程搜索分页懒加载功能实现
weixin_59038724的博客
07-12 1747
1、 在 src 目录下 新建文件夹 directive / loadmore。4、 基于 el-select 封装 懒加载 远程搜索框。3、在main 文件中注册该指令。
el-select下拉框远程搜索且多选时，编辑需要回显的一个简单案例
最新发布
天渺(喵)工作室
04-21 2538
前端业务开发中不管使用vue2~3，还是react，angular各种前端技术栈，经常会遇到这种业务。一个下拉框Select中，不仅需要需要**支持远程模糊搜索，还需要支持多选。并且在编辑时，还能正常把已经多选好的内容回显到Select中。** #### 用Vue3+ElementPlus+TS举一个简单的案例。
el-select下拉框多选远程搜索反显
gaoyu007的博客
07-22 1993
el-select下拉框多选远程搜索反显
【vue+Element】el-select远程搜索&动态加载
Sylviaswefa的博客
04-12 803
当下拉框的选项过多，我们一次性将所有选项都放入下拉框中会导致页面卡顿，每次点击下拉框都会出现白屏，我们可以用自定义指令实现下拉框的动态加载。
vue + elemen可远程搜索select选择器的封装（思路及源码分享）
Whit3ZzT的博客
02-10 1361
vue + elemen可远程搜索select选择器的封装详细解读
写一个vue+element selected远程搜索下拉框虚拟列表
04-01
以下是一个基本的Vue Element远程搜索下拉框虚拟列表组件。此组件包括以下功能： - 支持远程搜索 - 支持虚拟滚动 - 支持选中项 ```html <template> <el-select v-model="selected" filterable remote reserve-keyword remote-method="remoteMethod" :loading="loading" :options="options" popper-class="virtual-list-popper" class="virtual-list-select" > <template #default="{option}"> <div class="virtual-list-item">{{ option.label }}</div> </template> </el-select> </template> <script> export default { name: "VirtualListSelect", data() { return { loading: false, options: [], selected: null, pageSize: 50, pageNum: 1, total: 0, keyword: "", }; }, methods: { async remoteMethod(keyword) { this.loading = true; this.keyword = keyword; this.pageNum = 1; await this.loadData(); this.loading = false; }, async loadData() { const { data } = await this.fetchData(); this.options = data; this.total = data.length; }, async fetchData() { const start = (this.pageNum - 1) * this.pageSize; const end = start + this.pageSize; const response = await fetch( `https://api.example.com/search?q=${this.keyword}&start=${start}&end=${end}` ); const json = await response.json(); return json; }, handleScrollToEnd() { if (this.options.length < this.total) { this.pageNum++; this.loadMoreData(); } }, async loadMoreData() { const { data } = await this.fetchData(); this.options.push(...data); }, }, mounted() { const popper = document.querySelector(".virtual-list-popper"); popper.addEventListener("scroll", () => { const scrollTop = popper.scrollTop; const scrollHeight = popper.scrollHeight; const clientHeight = popper.clientHeight; if (scrollHeight - scrollTop === clientHeight) { this.handleScrollToEnd(); } }); }, }; </script> <style> .virtual-list-select .el-input__suffix { right: 10px; } .virtual-list-item { height: 50px; line-height: 50px; padding: 0 20px; border-bottom: 1px solid #ebeef5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .virtual-list-popper { max-height: 300px; overflow-y: auto; } </style> ``` 使用示例： ```html <virtual-list-select /> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值