位置: 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 】参数相关的介绍和使用

  • 进口关税计算公式 案例
  • 小微企业做什么
  • 金税盘离线开票金额超限怎么处理
  • 银行承兑质押金的会计分录
  • 公司无偿更换产品账务如何处理
  • 公司注销固定资产怎么处理税怎么交
  • 邮局可以开发票吗 税点多少
  • 红字信息表可以开一半吗
  • 金蝶kis旗舰版使用手册
  • 银行存款日记账与银行对账单之间的核对属于
  • 员工个人无息借款违法吗
  • 并购投资的方式有哪些
  • 重复缴税怎么做账
  • 财务发票已开但钱未到位怎么处理?
  • 押金满一年才能退
  • 开具增值税发票销货清单的最新规定是什么
  • 预缴企业所得税税率
  • 资产原值包含残值吗
  • 预付油卡怎么入账
  • 发票章盖住备注烂备注的日期,看不清
  • 预提费用和待摊费用是根据以下哪项原则设置的会计科目
  • 买保险公司的年金险划算吗
  • 食堂费用没有发票能挂账吗
  • 工程类劳务发票
  • 房屋契税怎样计算公式
  • 佣金可以开票吗
  • win11如何启用远程访问
  • 取得进账发票没发票
  • macos big sur卡在
  • win11预览版选哪个
  • css合并为单一边框
  • npm命令不存在
  • 自定义修改器
  • 经营租赁固定资产体现实质重于形式
  • 如何用ai写代码
  • 移动端适配方案面试题
  • 购进的产品样品怎么入账
  • 新闻管理系统类图
  • 如何在亚马逊平台卖货
  • 建筑行业预缴个税怎么算
  • 11月资产负债表
  • RabbitMQ个人实践
  • 填写记账凭证的日期一般是会计人员填制记账凭证的
  • myeclipse配置数据库连接
  • 增值税专用发票抵扣期限
  • 新销售收入的确认条件
  • 公司充话费
  • 残疾人个人所得税扣除
  • 冲销以前年度多提税金
  • 应收账款对应什么会计科目
  • 长期股权投资应计提减值准备的金额
  • 建筑安装企业外雇施工人员劳务费用什么做支付凭证
  • 2010年漏记的费用,11年该如何记账?
  • 建筑企业成本核算方法
  • 法院的申请执行费是多少
  • 以前年度不合规发票如何调年报
  • 减免税款月末是否结平
  • 其它流动资产为负数原因
  • 企业筹建期间发生的费用应计入什么账户
  • macbookpro蓝牙找不到
  • fedora win10
  • win8更新设置
  • win7怎么删除右键菜单
  • win10系统升级后共享打印机不能用
  • win7如何安装iis7.0
  • js实现用户登录
  • unity2020商店
  • activitythread main方法
  • python调用bash
  • vue只适合做单页项目吗
  • jquery input checked
  • javascript高级程序设计最新版
  • 如何用nodejs搭建服务端
  • javascript内置对象window
  • 浅谈编码,解码的意义
  • javascript中math.ceil
  • 简述javascript中的函数
  • 跨区迁移税务需要注销吗?
  • 通用定额发票分经营类型吗
  • 不明身份人员法律定义?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设