jeecgboot / JeecgBoot

🔥「企业级低代码平台」前后端分离架构SpringBoot 2.x/3.x,SpringCloud,Ant Design&Vue3,Mybatis,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! 引领新的开发模式,引入AI模型能力 OnlineCoding->代码生成->手工MERGE,帮助Java项目解决70%重复工作,让开发更关注业务,既能快速提高效率,帮助公司节省成本,同时又不失灵活性。
http://www.jeecg.com
Apache License 2.0
40.7k stars 14.85k forks source link

所有a-select组件 下拉定位不准问题 #6448

Closed benben120 closed 6 months ago

benben120 commented 7 months ago
版本号:

3.6.2

问题描述:

诸如api-selet、j-search-select、j-dict-select组件都存在如果select下拉框数据量过多出现滚动条而且屏幕分辨率过低(自己模拟实现可以放大浏览器显示尺寸,大概150%比例下)时,下拉框的定位getPopupContainer会出现定位失效的问题

截图&代码:

image

b909b92f-d560-4f0d-be3d-8c07bfae4b3b 88ddf88e-ff71-40be-85dc-ed01896ed3c8

43248b25-6b7d-4d1e-96a7-b90e957907f3

友情提示(为了提高issue处理效率):

zhangdaiscott commented 7 months ago

zy

1298191366 commented 7 months ago

根据 Ant Design Vue的官网组件描述,你可以手动调整getPopupContainer 指定区域,如 指定为document.body指定到body元素里面,getPopupContainer返回的是函数对象 【代码:】 image 【效果:】 image 【未指定:】 image

需要注意的是:当指定到document.body的时候 会发现下拉菜单跟随页面滚动

benben120 commented 7 months ago

根据 Ant Design Vue的官网组件描述,你可以手动调整getPopupContainer 指定区域,如 指定为document.body指定到body元素里面,getPopupContainer返回的是函数对象 【代码:】 image 【效果:】 image 【未指定:】 image

需要注意的是:当指定到document.body的时候 会发现下拉菜单跟随页面滚动 不是同一个问题 我有设置过getPopupContainer => document.body 在drawer和modal中还是一样定位不准确

1298191366 commented 7 months ago

那详细描述你的问题。我测着没问题。或者发个视频 image

benben120 commented 6 months ago

那详细描述你的问题。我测着没问题。或者发个视频 image

https://github.com/jeecgboot/jeecgboot-vue3/assets/162244360/aa863e50-8344-4b8c-98e9-74b45d2edfa8

image image 下拉的定位在可视区域位置足够时是可以支持的 可以查看视频 可视区域位置不足时就定位不准确了 这个可以优化的么?

1298191366 commented 6 months ago

因为可视化区域不够展示,想要展示全那肯定会错位。您可以尝试设置一下最大高度,让下拉框的区域高度占比少一些

image 解决方案: image

benben120 commented 6 months ago

因为可视化区域不够展示,想要展示全那肯定会错位。您可以尝试设置一下最大高度,让下拉框的区域高度占比少一些

image 解决方案: image

好的 那么在 drawer 或者modal 中使用select 组件 如果存在 屏幕分辨率小的情况 出现这种错位 目前是没解决方案吗

1298191366 commented 6 months ago

没有,因为你可视化区域不够,就没办法。你可以根据当前屏幕大小动态更改高度,也是一种解决方案