Elementplus远程搜索下拉

已于 2024-04-28 21:11:48 修改
阅读量603 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： java 服务器 linux
于 2024-04-28 21:11:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45816407/article/details/138291289
本文介绍了如何在Vue应用中使用el-select组件进行远程搜索，通过`getAppNumberList`方法获取型号数据，并展示了一个使用示例和数据处理过程。

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

远程搜索

:remote-method=“getAppNumberList”

		<div class="filter-item">
          <span>型号:</span>
          <el-select v-model="listQuery.numberId" clearable filterable :remote-method="getAppNumberList" remote placeholder="请选择型号">
            <el-option
              v-for="item in appNumberList"
              :key="'type' + item.id"
              :label="item.numberName"
              :value="item.id" />
          </el-select>
        </div>

	getAppNumberList(numberName) {
      this.listAppNumberQuery.numberName = numberName
      fetchAppNumberList(this.listAppNumberQuery).then(response => {
        this.appNumberList = response.data.data
      })
    },
vue3+Element Plus功能组件封装——条件搜索（输入框（可新增删除），下拉选择框，日期选择）
布克吉的博客
08-12 1387
后台管理做多了，会发现无非就是一些，表单和表格，没什么新东西，直接套模板即可，下次遇到直接用，别再重复造轮子了，多花点时间推升自己！
【vue3】element-plus下拉选择二次封装，实现远程搜索和下拉加载
qq_40305332的博客
03-21 1416
【vue3】element-plus下拉选择二次封装，实现远程搜索和下拉加载
element-plus远程搜索
在这个地方会介绍一些前端和后端的开发内容，暂时以springBoot和Vue为主。
11-18 968
vue+element-plus,远程搜索
element-plus(vue3)表单el-select下拉框的远程分页下拉触底关键字搜索实现
最新发布
m0_58355897的博客
04-25 743
使用二、升级使用-二次封装组件定义// 查询下拉框的滚动容器// 判断是否滚动到底部// 触发绑定的回调函数// 使用防抖处理滚动事件// 设置防抖时间为300ms// 将防抖后的函数赋值给 el.userLoadMoreselectDom?});},},全局注册。
element-plus 搜索下拉列表
s2974240889的博客
10-22 911
2、这样就会导致 只能选择搜索一次 第二次重新选择就会没有下拉列表 那么我用了blur事件来监听下拉缩回去的时候 就将值清空重新发起请求 这样就会出来了。当用户输入 0 或者没有的值的时候 就判断一下 如果返回数据为空 就将input 的值为空 重新发起请求 这样列表就又出来了。1、这样就是一个简单的select+option实现的input搜索下拉列表显示的简单的一个模版。原因：因为输入框如果没有发请求的时候会返回一个null那么下拉列表就没东西了 所以就为空了。
element Plus Select选择器实现查询搜索 下拉选择
weixin_52703987的博客
07-04 7276
以上是使用 Element Plus 的 Select 组件实现查询搜索的下拉选择的基本步骤。还可以用于菜单导航的场景，当菜单项较多时，可以使用 Select 选择器来展示菜单选项，用户可以通过搜索或浏览下拉列表来选择菜单项。方法中，可以通过发送异步请求或者从本地数据中进行搜索，获取匹配的选项数据，并将数据设置到 Select 组件的。还可以用于多选的场景，用户可以从多个选项中选择多个值。用户可以根据某个字段的值从下拉列表中选择一个或多个选项，以便过滤显示的数据。：在数据展示或数据查询的界面中，
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
ElementUI 2.x 输入框回车后在调用接口进行远程搜索功能
lalala_dxf的博客
10-03 1411
默认的远程搜索会在输入框聚焦的时候就展示下拉弹窗，而我们需要的是在。
vue远程搜索下拉框（输入框）使用lodash防抖
weixin_43714266的博客
12-31 2264
vue远程搜索下拉框（输入框）使用lodash防抖 需求 做一个带有远程搜索的下拉框，用户输入字符后，根据输入的字符去后台获取匹配的数据列表，展示在下拉框，供用户选择。 问题 用户如果每隔半秒输入一个字符，那就会不停的去后台请求匹配到的数据。很明显不合理，而且数据过多的时候这里就会卡顿，因此需要防抖，即设置3秒内不管用户输入多少个字符，最终只根据最后一次输入完毕后输入框的字符去后台请求匹配数据。 ...
Element-ui中input输入框远程搜索的使用方法
小柠檬爱编程
12-09 5912
项目中会使用掉后端的接口来完成远程搜索,看官方文档写的可能有些繁琐,在此记录下,在vue项目中如何使用远程搜索来实现的 效果图: HTMl: <el-form-item label="素材名称："> <el-autocomplete class="width250" size="mini" v-model="name" :fetch-suggestions="querySearchAsync" @select="handleSelect" .
三、ElementPlus下拉搜索加弹窗组件的封装
张先森的博客
10-12 1138
近期产品提出了一个需求，要求一个form的表单里面的一个组件既可以下拉模糊搜索，又可以弹窗搜索，我就为这个封装了一个组件，下面看效果图。
elementuiplus select空间 远程搜索
一株木樨的博客
08-31 844
elementuiplus 的select控件远程搜索
element ui实现下拉框远程搜索，请求后台获取数据并展示下拉内容
weixin_43208652的博客
12-18 5627
element已经给我们提供了此方法，需要在el-select中绑定几个属性即可 通过remote-method来实现实时发起搜索请求 <el-select v-model="searchByName" filterable placeholder="请输入企业名称/姓名" remote ...
vue3 + element Plus实现select远程搜索
m0_52761651的博客
02-16 4451
vue3 + element Plus实现select远程搜索
element plus输入框/下拉框实现自动搜索
idanzk的博客
08-23 2050
keyup.enter 键盘点击事件 点击enter时触发对应的操作。这里的handleQuery是之前写好的搜索点击事件，调用了条件查询的接口。在 el-select 内部 加入 @change事件。仅实现简单功能，使用时可能需要根据项目需求进行优化。
vue3+element-plus多个多选下拉框并搜索
每一篇博客都是对自己技术的沉淀
04-07 1834
const checkedValues = ref<any[]>(options.value.map((item: any) => item.value)) // 下拉框多选选中的值。useCheckboxGroup(ref([{ value: '广东局', label: '广东局' }]), '辖区范围'),{ value: 'SZSE', label: '深主板' },{ value: 'BSE', label: '北交所' },{ value: 'SSE', label: '沪主板' },
Vue(ElementUI)封装远程下拉框组件
m0_61820867的博客
07-24 1230
Vue(ElementUI)封装远程下拉框组件，可以通过子组件清空
el-select下拉框远程搜索且多选时，编辑需要回显的一个简单案例
天渺(喵)工作室
04-21 6373
前端业务开发中不管使用vue2~3，还是react，angular各种前端技术栈，经常会遇到这种业务。一个下拉框Select中，不仅需要需要**支持远程模糊搜索，还需要支持多选。并且在编辑时，还能正常把已经多选好的内容回显到Select中。** #### 用Vue3+ElementPlus+TS举一个简单的案例。
elementplus实现带搜索框的联级选择器
12-26
`<el-cascader>`组件本身就是一个下拉多级联动的选择器。 要添加搜索框，你可以这样做： 1. 首先，在HTML结构上，将基本的`<el-cascader>`与一个`<input>`搜索框结合起来： ```html 搜索..."> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值