关于el-menu ellipsis右侧空余太多的解决办法

已于 2024-06-13 10:47:15 修改
阅读量350 收藏
点赞数 1
文章标签： 前端
于 2024-05-23 15:41:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37225650/article/details/139149751
版权

研究半天没研究个所以然，直接加margin-right:-145px;，估计是elementplus计算有问题吧
请添加图片描述
请添加图片描述
实测还是难受，最终是采用写死的方式，不用v-for，同时删掉所有中间的注释，就没问题了

移动端中使用el-menu导致ellipsis属性失效(或者在IOS下失效)
qq_20751269的博客
08-31 1125
移动端中使用el-menu导致ellipsis属性失效(或者在IOS下失效)
vue 处理el-menu数据时遇到异步问题 ，promise.all处理多个ajax请求
weixin_41458007的博客
07-22 539
vue el-menu组件 子组件通过el-submenu对 json数组实现树级递归 父组件(Launch.vue) 调用子组件(Navbar.vue) 传过来的是json数组，刷新后子组件通过props从父组件json数组丢失childs ！后台打印的json数组却是完整的，只是渲染出问题。 原因：1.异步嵌套问题，ajax请求一级栏目后，通过foreach循环拿到id再ajax请求二级栏目，两个ajax请求，结果只拿到第一个ajax返回结果就渲染了，二级栏目就没拿到。 2.没有一次性给navRo
ElementPlus 侧边栏右侧空隙
wj1713520的博客
03-16 1154
.el-menu{ border-right: none !important; } 去除侧边栏右侧的空隙
一个样式解决element-ui侧边栏组件el-menu占不满屏幕的问题
e274426380的博客
09-23 6699
网上解决这个问题的方法都非常麻烦，比如加很多很多高度100%，而有些人又没法复现这种成功。 在这里分享一个新属性给大家试试，非常有效 height:100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， https://blog.youkuaiyun.com/qq_16687863/article/details/100516013 但是设置height:100vh，该元素
解决element-plus侧边栏组件el-menu不占满可视窗高度的问题
qq_44886882的博客
07-27 4962
解决element-plus侧边栏组件el-menu不占满可视窗高度的问题。
element ui导航栏折叠展开时出现空白区域解决办法
H-rosy的博客
07-23 3705
今天在使用elementUI做导航栏时，使用isCollapse控制导航栏展开和折叠时遇到了一个问题，就是在展开时因为aside区域的宽度值是一下子就从64px变成200px，导致导航栏区域的变化跟不上width的变化。因此就出现了上面这个情况，但是我在找解决方案的时候好像并没有什么好的答案，于是我就自己瞎折腾勉强解决了这个问题，可能不是太完美，你们可以参考一下。首先看一下解决之前的情况 之后使用了css3中过渡加转换的功能勉强达到效果。关键代码就一句，把它加入到导航栏的类选择器中就OK...
基于Element-Plus动态配置Menu 菜单栏
失眠时间的博客
11-16 4182
菜单栏配置化图标配置化参考vite动态配置svg图标及其他方式集合。
el-menu-item设置text-overflow: ellipsis 没生效
最新发布
12-28
### 解决 `el-menu-item` 中 `text-overflow: ellipsis` 样式不生效的问题 当遇到 `el-menu-item` 的文本溢出样式无法正常工作的情况时，通常是因为默认的 CSS 设置未能满足触发 `text-overflow: ellipsis` 所需的...
el-menu-item字太多挤压
10-20
根据提供的引用内容，我了解到您遇到了el-menu-item字太多挤压的问题。这个问题可能是由于el-menu-item的宽度不够导致的。您可以尝试通过以下方法解决这个问题： 1. 设置el-menu-item的宽度为固定值，例如：width: ...
react-lines-ellipsis:用于React.JS的简单多行省略号组件
05-11
npm install --save react-lines-ellipsis 用法 import LinesEllipsis from 'react-lines-ellipsis' < LinesEllipsis text = 'long long text' maxLine = '3' ellipsis = '...' basedOn = 'letters'> 选项 props....
element-ui菜单el-menu的使用
热门推荐
m0_63040701的博客
05-28 2万+
el-menu详解。
vue+element实现menu组件
_长歌行
07-25 1635
用elementUI做的一个左侧菜单展示，直接上代码： <template> <div class=""> <!-- 一级菜单循环--> <el-menu class="menuLen" v-for="( item1 ,index1 ) in menuList" :unique-opened=true :router=tr...
【Vue3】el-menu的踩坑和使用
小安驾到的博客
07-04 5055
el-menu一些小技巧，满足更多少见需求！
element ui中横向menu与媒体查询
2301_77643651的博客
06-26 982
记录一下随手写的小功能。
Vue 3项目中结合Element Plus的＜el-menu＞和CSS3创建锚点，以实现点击菜单项时平滑滚动到对应的锚点目标
m0_67624022的博客
03-22 2471
确保已经安装了Element Plus库。可以使用npm或者yarn进行安装，具体步骤与上文提到的相同。方法来处理菜单项的选择事件，使得点击菜单项时能够平滑滚动到对应的锚点目标。在你的Vue 3项目中引入所需的Element Plus组件和样式。值对应，这样点击菜单项时页面就会平滑滚动到相应的锚点目标位置。属性为对应的锚点目标的id。在页面中添加与菜单项。
vue3 ---- 递归组件生成menu菜单 && 路由守卫鉴权
每天都要努力学习哦~~
06-05 4340
对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的，我们可以通过方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。一个单文件组件可以通过它的文件名被其自己所引用。例如：名为FooBar.vue的组件可以在其模板中用引用它自己。
element 左菜单过宽处理成省略号
轻风细雨_林木木
04-12 1792
一、如图，使用element以后菜单过宽，字体被遮挡 二、目标：将超出的部分显示为省略号 参考资料：https://blog.youkuaiyun.com/Beam007/article/details/84305216 采用方案：通过…表示 鼠标移上去显示全称（其他的自己看资料） 实现逻辑和思路： 1.找到菜单列表里面的节点标签span 2.设置title属性（设置以后鼠标移动上去就会显示title内...
el-menu导航鼠标移入背景色，字体颜色改变，及文字过长，显示省略号，鼠标悬停显示全文
qq_40011214的博客
02-18 1万+
一、上效果图 二、上代码 <template> <div class="about"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > <el-sub-menu index="1"> <templat
element-plus中使用el-menu/el-menu-item视口宽度变小，导航栏会自动隐藏一些内容为...
m0_69368357的博客
11-22 354
其实我当时查阅文档有看到这个属性，我还加了，只不过没有加上：，我其实不是很懂为什么这里加上：就好使了？改正：其实很简单就是给el-menu标签加上 :ellipsis="false" 即可。我的代码如下：(没事瞎练习仿知乎页面)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值