antdesignvue的下拉菜单会导致项目启动较慢可以使用css实现下拉菜单

最新推荐文章于 2024-04-26 17:54:13 发布
VIP文章 最新推荐文章于 2024-04-26 17:54:13 发布
阅读量514 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42837167/article/details/109534184
版权

vue中antdesignvue的下拉菜单使用后启动较慢，应该使用自定义的下拉菜单。
这是网上一种实现方式，但是
注意z-index 如果其他组件，比如“图片”没法定义z-index属性或者postion为absolute的话，下拉菜单会被遮挡。

我这里就是把父类 dropdown-content 的div的z-index改高，他的子选项才能显示，原因未知

<div class="dropdown">
	<span>更多</span>
	<div class="dropdown-content" style="
最低0.47元/天 解锁文章
tututyl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant-design-vue-jeecg 项目首屏加载过慢的问题
牛晓林的博客
12-16 4569
最近用ant-design-vue-jeecg的开源框架写项目，那个加载叫一个慢啊！ 我自己谷歌浏览器在网速好的情况下，还得加载十多秒甚至20秒！！！这搁那个用户身上能忍受！！！ 关键已经用了各种webpack配置，也都没见什么成效。 罪魁祸首就是他在线开发表单的包，大到无法想象！ package.json中将这个依赖项删除，然后删除node_modules, yarn重新装，再打包，效果立竿见影！ 这时候强刷浏览器，开始的加载动画时间一晃而过~~美滋滋 反正我们也不需要在线开发表单的功能，对我这个项目
vue实现下拉菜单树
01-18
本文实例为大家分享了vue实现下拉菜单树的具体代码，供大家参考，具体内容如下 效果：使用 Vue-Treeselect 实现 建议通过npm安装vue-treeselect，并使用webpack之类的捆绑器来构建您的应用程序。 npm install --...
vue_ant-design-vue菜单递归
12-28
后台返回菜单无限层级展示
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。 当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。 想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡只能限制渲染的数据数量。 我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后当select框不下拉
Vue实现自定义下拉菜单功能
10-18
主要介绍了Vue实现自定义下拉菜单功能,文章先通过实例代码给大家介绍，后面对用到的知识点总结，需要的朋友可以参考下
ant-design-vue中 a-select组件 - 加载大量数据造成卡顿--已解决
ansheng02的博客
01-10 5943
解决方案：借鉴 列表的滚动加载，实现 a-select 数据展示时滚动加载 隐藏问题： 在ant-design-vue 中 ，select 可以通过 输入文字 匹配 数据源中的数据，但是在滚动加载中，如果暂时还没有加载到该条数据，则不能 匹配 到的这条数据。 具体思路如下： 监听下拉框展开，下拉框展开后，要重置展示的数据，默认每一次新展开就回到初始加载的数据展示。 监听数据滚动 - popupScroll 滚动条改变后 请求数据加载（可以异步请求，也可以一次性请求后，分批加载） 对滚动加载.
uniapp设置下拉框并获取下拉框值
weixin_48616345的博客
05-06 2479
uniapp设置下拉框并获取下拉框值
uniapp实现下拉多选框
m0_70337053的博客
07-28 8982
uniapp实现封装下拉多选组件
uniapp中如何给下拉框动态绑值
明思齐的博客
06-21 2755
在项目中我们会经常遇到新增的功能，而新增的页面中就会有输入框、下拉框、文本域、日期选择框等等。那么在uniapp是如何给下拉框中调用接口动态绑值的呢？请往下看 💨💗 uView官网：介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
uniapp-select下拉菜单组件
m0_62134648的博客
06-25 8573
插件市场 链接 字段和方法说明。
uniapp 自定义下拉框
m0_47559177的博客
03-17 3574
根据 https://gitee.com/kcren/uniapp-dropdown-filter/tree/master自己加了一层封装 可以进行切换选择下拉内容模板 在components下创建ren-dropdown-filter/ren-dropdown-filter.vue图标的引用 和颜色 可以自己进行修改请选择{{ navData[actNav?
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
12-13
最近做的一个项目是基于 vue + AntDesign 的。由于项目要求，需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下： 在线演示地址>>   首先新建一个Table组件的实例： <a> { return ...
HTML+CSS实现简单下拉菜单效果
09-24
使用Html+css实现简单的下拉菜单代码非常简单，具有参考借鉴价值，需要的的朋友参考下吧
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 332
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 99
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 97
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 138
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue 实现级联选择器功能
清音的博客
04-22 506
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 399
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
ant design vue select 容器滚动下拉菜单不跟随
05-30
Ant Design Vue Select 组件的下拉菜单是一个独立的容器，如果它不随着滚动而移动，可能是因为它的样式被固定了。您可以通过以下几种方式解决这个问题： 1. 设置下拉菜单的样式为 position: absolute; 并设置相应的 top 和 left 值，使其相对于 Select 组件的位置。 2. 使用 JavaScript 监听滚动事件，并在滚动时动态设置下拉菜单的位置。可以通过获取 Select 组件的位置和滚动条的位置来计算下拉菜单的位置。 3. 使用 CSS Sticky 定位，将下拉菜单固定在 Select 组件上方。具体实现方法可以参考以下代码： ``` .ant-select-dropdown { position: sticky; top: 0; } ``` 希望以上方法能够帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值