若依框架——解决菜单显示不全的问题

本文介绍了在开发过程中遇到菜单名称过长无法完全显示的问题时,可以采取的两种解决方案。一种是增加列宽,但这种方法并不适用于长度不固定的情况。另一种是使用el-tooltip和文本框,动态显示标签名称,以适应不同长度的菜单名。在修改过程中,可能会遇到与若依默认设置冲突的问题,建议修改默认鼠标展示的值来解决这个问题。
摘要由CSDN通过智能技术生成

 很多开发的时候会遇到菜单名字过长,显示不全的问题,对此有2中解决方式

1. 增加列宽—— 路径:src---assets---styles---variables.scss

2. 在长度不一定的情况下,建议使用文本框的方法,动态的显示标签的名称,一味的增加宽度并不能解决问题

效果图:

实现代码

修改路径    src---layout---Sidebar---Sidebarltem.vue 

<el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right-start">

       <span v-if="onlyOneChild.meta">

     <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)":title="onlyOneChild.meta.title" />

    </span>

    </el-tooltip>

在修改的过程中会碰到若依的默认鼠标展示值和我们展示的值重复的问题,建议解决方式

代码修改路径  src--layout--Sidebar---item.vue

 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
若依框架是一个基于Spring Boot、Spring Security、MyBatis-plus、Vue、Element-UI的快速开发平台,它采用前后端分离的方式进行开发。它包含了许多常用的功能,如用户管理、角色管理、菜单管理、部门管理、字典管理、定时任务等等,并提供了代码生成器、日志管理、在线用户管理等扩展功能,可以快速搭建企业级应用。\[1\] 若依框架的前后端分离版包含以下几个模块: - ruoyi-admin: 后台服务,用于启动和配置数据库。 - ruoyi-common: 通用工具,包括工具类、异常处理、过滤器等。 - ruoyi-framework: 框架核心,包括aop切面、系统配置、拦截器等。 - ruoyi-generator: 代码生成器,通过页面操作生成代码。 - ruoyi-quartz: 定时任务模块。 - ruoyi-system: 系统模块,包含系统代码。 - ruoyi-ui: 后台管理系统的页面代码,采用Vue和Element UI作为前端框架。\[2\] 要搭建若依框架前后端分离版,需要满足以下环境要求: - JDK >= 1.8 (推荐1.8版本) - MySQL >= 5.7.0 (推荐5.7版本) - Maven >= 3.0 - Node >= 12.0 - Redis >= 5\[2\] 在搭建环境完成后,可以执行相应的命令来启动若依框架。执行成功后,可能遇到数据表不显示问题。这时需要在数据库中刷新表,可以在表上点击鼠标右键,选择刷新,即可显示出所有的表。\[3\] #### 引用[.reference_title] - *1* [若依框架——前后端分离版](https://blog.csdn.net/moran_3346/article/details/131803190)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [使用若依框架RuoYi前后端分离版(超详细步骤)](https://blog.csdn.net/thewhat/article/details/131264175)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值