vue3使用ant-design的select实现下拉框滚动分页加载

最新推荐文章于 2024-09-26 21:52:31 发布
原创 最新推荐文章于 2024-09-26 21:52:31 发布 · 3.4k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

实现下拉框滚动加载远程数据

<a-select
  v-model:value="formState.merchantName"
   mode="multiple"
   style="width: 100%;"
   :defaultOpen="false"
   placeholder="请选择客户名称"
   :filter-option="false"
   @deselect="deleteSelect"
   @popupScroll="popupScroll"
   @select="select"
   @dropdownVisibleChange="dropdownVisibleChange"
   @search="searchMerchantList"
 >
最低0.47元/天 解锁文章
【Vue2 + ElementUI】PaginationSelect 带分页和搜索功能的下拉列表组件
Komorebi_00的博客
06-19 1194
带分页且可模糊搜索的下拉列表
antd vue二次封装远程搜索下拉框组件，支持滚动分页
cherry_na的专栏
01-24 1088
vue2中使用antd vueUI 二次封装远程搜索下拉框组件，支持滚动分页，单选和多选，最多选择数量限制。
a-select组件使用dropdownRender 时如果有a-input组件，点击a-input时select组件会收起，导致input无法输入
superYe7的博客
03-10 4499
实现如图效果 期望：点击输入框可以正常输入 下拉框不会收起，选择option时下拉框可以正常收起。 思路：通过open控制select的收放。 <template> <div @mousedown="e => { e.preventDefault() this.selectOpen = true }"> <a-select default-value="lucy" style="width: 300px" :open="se
vue select 下拉加载更多（懒加载）
a314753967的博客
02-17 3085
为避免后端一次给过多数据，导致页面卡顿，select选项可以进行分页，然后下拉加载更多. 项目中使用的elementUI, 先自定义指令，在main.js中添加： v-scroll-loadMore="loadmore" Vue.directive('scroll-loadMore', { bind(el, binding) { const SELECTWRAP_DOM = el.querySelector( '.el-select-dropdown .el-select-d
ant-design-vue@1.7.8扩展多个选择框级联
肖晗的博客
09-26 1575
扩展 d-select 组件，多个选择框级联功能。
Vue3+Ts+Ant Design Vue实现多选框的全选功能
m0_52449484的博客
10-08 1594
Vue3+Ts+Ant Design Vue实现select下拉框的多选和全选功能
ant-design vue 实现增行减行
abcdefg182的博客
07-28 1074
增行方法：handleAddColumn() 删行方法：handleDeleteColumn(selectedRows) <template> <a-card :bordered="false"> <a-form @submit="handleSubmit" :form="form"> <a-tabs @change="callback" defaultActiveKey="2" type="card"> <a-t
Vue3 +el-select实现下拉加载更多功能
lxc的点点滴滴
09-05 2200
用vue3做el-select下拉加载时遇到了很多问题，以前vue2的时候定义一个指令然后很容易就实现了这个功能,但是前两天用vue3的时候遇到了很多坑，不是报错就是根本没反应，也是摸索了好久才实现了，简单记录一下。好了，下拉加载大致功能就实现了，亲测有效。当然为了更好的用户体验，实现该功能的同时，一般会加上搜索功能，注意添加防抖节流防止频繁调用。1.在项目中新建文件，并添加核心代码。2.在main.js中注册指令。最后附上下拉加载功能核心代码。
vue使用ant design Vue中的a-select组件实现下拉分页加载数据
程序媛的博客
10-13 2666
vue使用ant design Vue中的a-select组件实现下拉分页加载数据，下拉触抵然后加载下一页的数据。
vue3+ant-design的select实现下拉框滚动分页加载
qq_41673169的博客
03-19 1134
【代码】vue3+ant-design的select实现下拉框滚动分页加载。
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增选中值返回对象示例）
热门推荐
wocwin的博客
02-28 2万+
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）新增选中值返回对象示例
antd-vue下拉框select搜索添加分页功能
Onelizi的博客
10-08 2588
antd-vue下拉框select搜索添加分页功能
a-select 下拉加载更多
weixin_45631278的博客
07-06 1060
<template> <a-select v-model="value" @popupScroll="handlePopupScroll" > <a-select-option v-for="(item, index) in options" :key="index" :value="item"> {{ item }} </a-select-option> </a-select> </tem
vue pull-to下拉滚动加载请求分页
眾K的博客
02-13 435
npm install vue-pull-to --save //然后引进来,放在组件上面注册好 import PullTo from ‘vue-pull-to’ 官网文档在这里：https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md 页面内容： <template> <div id="pullC...
Vue项目实践：使用滚动下拉分页优化大数据展示页面【通过防抖加标志位进行方案优化】
前端开发工程师
06-11 2160
统的分页机制通过点击页码来加载更多内容，虽然直观，但在处理大量数据时可能会导致用户体验不佳。相比之下，滚动下拉分页能够在用户滚动到页面底部时自动加载更多内容，既节省了用户操作，也使得数据的展示更加流畅自然。
vue3——利用自定义指令实现下拉框分页懒加载
zmy967131的博客
07-24 1851
vue3——利用自定义指令实现下拉框分页懒加载
vue3使用elementUI树形下拉懒加载（动态加载）
weixin_51569223的博客
09-26 3465
vue3使用elementUI的级联下拉懒加载（动态加载）
在AntDesignPro中的ProFormSelect组件中加入滚动加载及模糊搜索
相信自己，没有攀不过去的高山！
11-21 2253
ProComponents
用ant-design-vue组件库如何实现
最新发布
05-16
### 使用 ant-design-vue 实现 Select 下拉框模糊查询过滤功能 为了实现带有模糊查询过滤功能的下拉选择框，可以通过 `ant-design-vue` 的 `<a-select>` 组件来完成。该组件提供了属性 `show-search` 和方法 `filterOption` 来支持输入框内的实时筛选功能。 以下是具体实现方式： #### 核心代码示例 ```vue <template> <a-select style="width: 200px" placeholder="请选择名称" show-search option-filter-prop="children" :filter-option="customFilterOption" @search="handleSearch"> <a-select-option v-for="(option, index) in filteredOptions" :key="index" :value="option.value"> {{ option.label }} </a-select-option> </a-select> </template> <script> export default { data() { return { options: [ { value: &#39;apple&#39;, label: &#39;Apple&#39; }, { value: &#39;banana&#39;, label: &#39;Banana&#39; }, { value: &#39;orange&#39;, label: &#39;Orange&#39; } ], searchValue: &#39;&#39; }; }, computed: { filteredOptions() { const regex = new RegExp(this.searchValue, &#39;i&#39;); return this.options.filter(option => regex.test(option.label)); } }, methods: { customFilterOption(input, option) { return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0; }, handleSearch(value) { this.searchValue = value; } } }; </script> ``` --- #### 参数说明 1. **`show-search` 属性** - 开启此属性后，`<a-select>` 将显示为可搜索模式，允许用户通过键盘输入内容[^1]。 2. **`option-filter-prop` 属性** - 设置为 `"children"` 表明基于选项的内容 (`label`) 进行匹配筛选。 3. **`:filter-option` 方法** - 自定义筛选逻辑函数，用于控制哪些选项会被展示给用户。在此处可以根据用户的输入动态调整筛选条件[^2]。 4. **`@search` 事件** - 当用户在输入框中键入字符时触发此事件，可用于更新内部状态变量以便进一步处理数据源[^3]。 5. **计算属性 `filteredOptions`** - 基于当前输入值动态生成符合条件的新数组作为最终渲染的数据集合[^2]。 --- #### 注意事项 - 如果希望提供更灵活的模糊匹配机制，则可以在自定义筛选函数 `customFilterOption` 中扩展正则表达式的复杂度。 - 对于大规模数据集场景建议采用服务端分页加载技术优化性能表现[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绝对零度HCL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值