若依框架的菜单管理中增加详情页 您所在的位置:网站首页 厦门20日新增详情信息 若依框架的菜单管理中增加详情页

若依框架的菜单管理中增加详情页

2024-07-12 04:03| 来源: 网络整理| 查看: 265

Ruoyi 框架生成代码时,各种数据操作都放在一个 dialog 弹出框中,而且只有编辑,没有查看……这很不方便。很多时候我们需要个详情页(只读),对于复杂实体在新建时,那个dialog中的表单也实在是有点过于粗糙了。 但是!是的,总是要说但是的。如果人家都给你做了,要你干嘛呢?框架框架就是个架子嘛。 经过反复研究,终于搞明白若依的菜单管理是如何对应路由的了!!!!!

因为代码生成已经建好了列表页,只需要建立相关的其他页面就好,比如新增,详情什么的。以高校管理为例。

1 新建详情页菜单

需要与列表页同级(下级好像我没测出来)。

级别类型菜单名称显示状态路径(path)组件(component)权限一级目录信息管理显示info二级菜单高校列表显示universitycrm-info/university/indexcrm-info:university:list二级菜单高校详情隐藏university/:universityIdcrm-info/university/detailcrm-info:university:list

这样,实际访问的路径是:

列表页:/info/university详情页:/info/university/:universityId

配好菜单后,可以先不隐藏,这样可以直接点击看路由是否可行,也可以在地址栏看到真实路径,以便调整修改。

2 修改列表页

修改列表页,增加详情按钮和跳转功能

(1)页面 template 部分

详情

(2)Script 中的 methods 部分

/** 详情按钮操作 */ handleShowDetail(row) { const loc = "/info/university/" + row.universityId this.$router.push(loc) }

$router.push(location)中的参数 location在源码中可以看到是 String类型。而且这里是全路径,所以一定要从根路径开始写!!

3 增加详情页

按照前面菜单设定好的路径创建详情页,重点是接收路由中的参数。

created() { const universityId = this.$route.params.universityId console.log(universityId) // 业务处理 },

总结

根据这个思路,可以灵活搭建各种菜单、功能了。实际上如果你不用代码生成,两个页面都自己写也一样的。加油吧~~


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有