位置: IT常识 - 正文

如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。(ant desgin-vue)

编辑:rootadmin
如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。     需求:拉下菜单中数据过多,200条以上,就会导致select组件卡死。所以需要使用滑动到底部使其分页加载

推荐整理分享如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。(ant desgin-vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:antd of vue,antdv vue,ant+vue,antd of vue,vue-ant,vue+antd,vue+antd,vue+antd,内容如对您有帮助,希望把文章链接给更多的朋友!

    可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件,并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现:

    1、在组件中绑定 @popupScroll回调事件

<a-select v-model="Form.governmentDirectors" @popupScroll="handlePopupScroll" > <a-select-option v-for="i in queryPageData" :value="i.id" :key="i.id" >{{ i.fullName }}</a-select-option > </a-select>

    2、在事件处理函数中,获取当前dom节点下滑的距离和滚动的位置。

handlePopupScroll(e) { const { target } = e; const { scrollTop, scrollHeight, clientHeight } = target; if (scrollTop + clientHeight == scrollHeight) { // 已经到达底部,触发分页逻辑 // todo 这里就可以触发加载下一页请求 具体函数根据当前业务需求来定 handlePagination(); }}

    分页逻辑例子:主要是页码++,数据追加(concat)

querypageFn() { const params = { page: this.querypage.page, size: this.querypage.size } queryListPage(params).then((res) => { if (res.data.code === 0) { if (res.data.data.length === 0) { return } else { this.queryPageData = this.queryPageData.concat(res.data.data) } } }) },    以上基本实现了使用a-select下拉框组件实现下拉分页加载数据,下面我们来说一下我遇到的坑。

当浏览器大小缩放为正常100%是没有问题的,可以正常下拉

如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。(ant desgin-vue)

并且打印了scrollTop, scrollHeight, clientHeight三个属性的关系

    但是当浏览器缩放大小调整不是100%后 我们下拉框滑到底部,是不会继续请求的,这时控制台也没有报错,接口返回也没有什么问题。

console.log(scrollHeight, scrollTop, clientHeight, 'llslsl')

以下为打印的内容 分辨率为125%的时候,我们会发现 scrollTop发现偏差,导致条件等式不成立

    到现在我就彻底慌了,难道scrollTop属性和浏览器分辨率有关。查阅资料后还真的是。

可以这样解释:当分辨率发生变化时,页面的布局和尺寸也会发生相应的变化,导致元素的位置和大小产生了变化。而 e.target 是指触发事件的元素,在这个元素尺寸和位置发生变化之后,它的 scrollTop 属性自然也会受到影响。

具体地说,当元素的高度变大或缩小时,它的内容区域的总高度也会发生相应的变化,进而影响到 scrollTop 属性的值。例如,当元素高度变大时,它的内容就需要滚动更多的距离才能到达顶部,因此 scrollTop 属性的值也会相应地增大;而当元素高度变小时,则需要滚动更少的距离才能到达顶部,因此 scrollTop 属性的值也会相应地减小。

以上是分辨率变化对 e.target 的 scrollTop 属性的影响的一个粗略解释。需要注意的是,具体的影响还取决于其他因素,如CSS样式、页面结构等因素的变化。如果具体情况下需要深入了解 e.target 的 scrollTop 属性是如何受到影响的,可以通过调试工具等手段进行进一步的排查和分析。

    说一下解决方案吧,我发现无论怎么变大变小  scrollTop 的偏差都会在2以内。所以我们需要改一下if判断里面的判断方式。

if (scrollTop + 2 + offsetHeight >= scrollHeight) 

    以上我们手动给他把这个偏差加上2,并且把等式换为大于等于,我们就能完美解决此bug,我一开始以为是歪点子,现在总结之后发现这是一个合适解决方案哦!

本文链接地址:https://www.jiuchutong.com/zhishi/293776.html 转载请保留说明!

上一篇:云计算技术(ICT)课后习题答案(云计算技术是学什么的)

下一篇:【torch.nn.Parameter 】参数相关的介绍和使用

  • 苹果13mini怎么用蓝牙耳机(苹果13mini怎么用4g网络)

    苹果13mini怎么用蓝牙耳机(苹果13mini怎么用4g网络)

  • 电脑菜单栏跑到屏幕上方怎么办(电脑菜单栏跑到电脑顶端了)

    电脑菜单栏跑到屏幕上方怎么办(电脑菜单栏跑到电脑顶端了)

  • 快手如何开通闪电购(快手如何开通闪购)

    快手如何开通闪电购(快手如何开通闪购)

  • 网易云音乐可以一起听歌吗(网易云音乐可以看访客记录吗)

    网易云音乐可以一起听歌吗(网易云音乐可以看访客记录吗)

  • 功放ab两组输出有什么用(功放ab两组输出 2对音箱的区别)

    功放ab两组输出有什么用(功放ab两组输出 2对音箱的区别)

  • 华为手机照片怎么加水印logo(华为手机照片怎么传到苹果)

    华为手机照片怎么加水印logo(华为手机照片怎么传到苹果)

  • 芒果pc会员是什么意思(芒果影视pc会员卡是什么意思)

    芒果pc会员是什么意思(芒果影视pc会员卡是什么意思)

  • 黄钻过期后自定义的空间背景会消失吗(黄钻过期了还能置顶吗)

    黄钻过期后自定义的空间背景会消失吗(黄钻过期了还能置顶吗)

  • 苹果11的ios出厂系统是什么(苹果11出厂设置在哪里)

    苹果11的ios出厂系统是什么(苹果11出厂设置在哪里)

  • 华为nova6没有耳机孔(华为nova6没有耳机孔怎么听歌)

    华为nova6没有耳机孔(华为nova6没有耳机孔怎么听歌)

  • oppo手机亮度调到最大但还不亮(oppo手机亮度调到最暗)

    oppo手机亮度调到最大但还不亮(oppo手机亮度调到最暗)

  • 打印不清楚是什么原因(打印出来的不清晰)

    打印不清楚是什么原因(打印出来的不清晰)

  • 华为双系统可以收到另一个系统的电话吗(华为双系统可以用一个微信吗)

    华为双系统可以收到另一个系统的电话吗(华为双系统可以用一个微信吗)

  • vivo和oppo是一个公司吗(vivo和OPPO是一个品牌吗)

    vivo和oppo是一个公司吗(vivo和OPPO是一个品牌吗)

  • 小米mix2s支持30瓦快充吗(小米mix2s支持无线充电吗)

    小米mix2s支持30瓦快充吗(小米mix2s支持无线充电吗)

  • 微信etc什么时候扣费(微信etc几天到)

    微信etc什么时候扣费(微信etc几天到)

  • 如何删除用过的京东卡记录(如何删除用过的小程序)

    如何删除用过的京东卡记录(如何删除用过的小程序)

  • word文档添加表格行数(word文档添加表格打字显示框框)

    word文档添加表格行数(word文档添加表格打字显示框框)

  • 怎么卸载ipad上的软件(怎么卸载ipad上的软件保留数据)

    怎么卸载ipad上的软件(怎么卸载ipad上的软件保留数据)

  • 华为怎么下载腾讯斗地主(华为怎么下载腾讯视频)

    华为怎么下载腾讯斗地主(华为怎么下载腾讯视频)

  • 手机照片看不清怎么办(手机照片看不清楚迷糊怎么办)

    手机照片看不清怎么办(手机照片看不清楚迷糊怎么办)

  • 手机上qq群怎么禁言一个人(手机上qq群怎么恢复群)

    手机上qq群怎么禁言一个人(手机上qq群怎么恢复群)

  • nova优享版什么意思(华为优享版和普通版区别)

    nova优享版什么意思(华为优享版和普通版区别)

  • 三星s10怎么开空调(三星s10开关机在哪里设置)

    三星s10怎么开空调(三星s10开关机在哪里设置)

  • vivox27微信美颜怎么打开(vivox27微信美颜怎么设置)

    vivox27微信美颜怎么打开(vivox27微信美颜怎么设置)

  • ps大型文件储存不了jpg(ps大型文件储存位置在哪)

    ps大型文件储存不了jpg(ps大型文件储存位置在哪)

  • 期初未缴税额是什么意思
  • 个人所得税应纳税所得额减半征收
  • 个税申报人员报送成功怎么删除
  • 横幅属于什么发票范围
  • 毛利和销售毛利
  • 个人应纳税所得额怎么算
  • 小规模企业应交增值税的二级科目
  • 外购存货的成本不包括
  • 小规模个人所得税怎么申报
  • 会计报表的附表包括哪些
  • 公司发实物要交税吗
  • 网银年费属于财务费用哪一项
  • 移动电子发票怎么发送到邮箱
  • 税控盘维护费优惠政策
  • 简并税率政策是什么?简并税率政策要点如何解读?
  • 客户扣款会计分录明细科目
  • 跨年的发票可以补开吗
  • 办公室装修费用计入什么会计科目
  • 小企业的费用应当在发生时计入当期损益
  • 政府返还的资金如何处理
  • windows所有应用
  • 汇算清缴工资薪金支出包含社保费吗
  • 母公司给全资子公司担保需要决议吗
  • 个体工商户需要年审吗
  • 事业单位基建账并入大账规定
  • PHP:token_name()的用法_Tokenizer函数
  • 华为鸿蒙系统支持苹果手表吗
  • 原始凭证的分类依据有哪些?分别能分为哪些类型?
  • 怎么确定
  • Symfony学习十分钟入门经典教程
  • 公司缴纳残保金怎么做账
  • elementui input无法输入
  • 计提企业所得税是在结转损益后吗
  • 进项税额转出会造成增值税应纳税额
  • python删除nan
  • 生活服务业纳税义务发生时间
  • 车船税是不是车损
  • 出口视同内销怎么申报
  • 个人股东借款给公司涉及个税么
  • 工业企业辅助生产设备
  • 收到以前年度增值税退税账务处理怎么做账
  • 出口货物不缴纳增值税
  • 股东向公司借款超过一年不还
  • 开外经证时需要马上交税吗
  • 在正确使用和正常维护的条件下
  • 赠送给客户的商品怎么入账
  • 企业进项是什么意思
  • 同在一个单位
  • 年报资本负债表怎么看
  • 印花税的计算公式应纳税所得额包含增值税吗
  • 汇算清缴调增的工资怎么做账
  • 五险 会计
  • 航天金税税控盘服务电话
  • 销售佣金?
  • 白条入账会受到监管吗
  • 工会为员工购买水杯
  • 删除重复记录mysql
  • 微软系统无法开机怎么办
  • 右键菜单管理 win10
  • centos6创建文件
  • centos vncviewer
  • ubuntu20录屏
  • ssh实现登录功能
  • image driver
  • sixtypopsix.exe - sixtypopsix是什么进程 有什么用
  • linux网络设置在哪里
  • win8查看已连接的wifi密码
  • 如何解决win7系统转为xp系统出现蓝屏怎么办啊
  • window7iis配置步骤
  • win10教育版登录
  • unity做3d游戏
  • 拖拽js实现
  • nodejs import
  • Unity导出的webgl能做AR吗
  • js中的tostring方法
  • android StrictMode使用
  • 如何查询企业出资时间
  • 安徽省国家税务局通用定额发票
  • 广东税务数字化平台官网
  • 淄博市地方税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设