// initialState.currentUser 中包含了所有用户信息 const menuData = await queryCurrentMenu();//从后端获取菜单的方法 patchRoutes([...menuData?.data]);//格式化菜单,如果根据菜单参数来,似乎无需做这一步 return fixMenuItemIcon(menuData?.data); }, }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10....
路由对象(routerConfig)专注于做route组件的生成,并且menuData中的部分属性会合并到routerConfig中,方便在路由组件中获取相应的菜单项配置属性,比如菜单的权限信息等。 具体分析routerConfig的结构设计: routerConfig是object类型,key值为加载组件的路径名,也就是menuData中的path属性,这样对象设计就方便了routerConfig和menu...
menu的request接受一个数据类似Protable的request,这个是默认带locale国际化的,如果没有需要关闭国际化locale: false ps: 2022/5/16修改:图标的显示之后在文档中看到另一种生成方法,不用在映射一次.写入图标全名,使用<Icon component="图标" />创建 import Icon from '@ant-design/icons' import * as icons from...
默认优先级:ant design icon > 自定义Icon。 使用ant design icon 直接复制icon名称: 例如如下icon ,只要复制FastBackwardOutlined即可 自定义需要在app.tsx中引入icon组件,例子如下 import { Dashboard } from './components/Icon' // 如需修改IconMap名称,应该定义、使用一并修改 const IconMap = { dashboard:...
1、新增router,新增models 新增菜单配置 1、如上图所示,打开/src/common/menu.js可以看到菜单列表 其中menuData 是菜单数组,其中每个对象表示一个菜单 name 表示菜单的名字 path 表示菜单的路由地址名称 icon 表示菜单的icon anthority 表示权限控制可以是字符串也可以数组,参数是准入身份 ...
import Icon from '@ant-design/icons'; // ... export const layout: RunTimeLayoutConfig = ({ initialState }) => { return { // ... menuDataRender: (menuData) => { return menuData.map((item) => { return { ...item, icon: ...
ant design pro 配置路由 显示页面步骤详解 第一步 在src/views下新建页面的vue文件,如果相关页面有多个,可以新建一个文件夹来放置相关文件。 给页面里写几个字,等会可以看到哦~~ 第二步 将文件加入菜单和路由 进入这个文件 src\config\router.config.js...
即可使用icon标签显示 2、设置菜单栏宽度 框架的菜单栏宽度较长,在/src/app.tsx文件下新增参数 3、菜单栏颜色 v5版本开始后,菜单栏颜色跟主题颜色已经分开,可以参考链接:https://procomponents.ant.design/components/layout#sider-token 可以在 config/defaultSetting.ts 定义 sider 对象...
sidebarMenu：左侧菜单的配置，这里主要注意几个配置：title左侧菜单一级标题 link左侧菜单一级链接 icon的...
权限是后台管理系统常见的需求,后台开发必须考虑设计的模块,antd-pro给我们提供了很好的关于权限的封装,我们只需要在配置菜单的时候配置上准入身份,在登录成功以后获取到登陆者身份以后更新登录人身份参数即可。 效果: 1、没有准入权限的菜单将不显示 2、直接在浏览器输入没有准入权限的的地址,将跳转到403页面(图1)...