您的当前位置：首页>全部文章>文章详情

【AntDesignPro】Ant Design Pro学习记录—自定义菜单选中

CrazyPanda发表于：2023-11-28 21:25:59浏览：765次TAG：

页面增删改查，打开子页面时，要让父页面菜单选中，参考官网给出的方案菜单的高级用法 - Ant Design Pro

使用的V5版本，直接设置 parentKeys:['/product'] 即可

export default [
  {
    path: '/product',
    // 不展示菜单
    menuRender: false,
    name: '产品管理',
  },
  {
    path: '/list/:id',
    // 编辑的时候使用顶部菜单
    layout: 'top',
    name: '列表详情',
    parentKeys: ['/product'],
  },
];

混合式菜单设置：

参考https://www.cnblogs.com/steamed-twisted-roll/p/15394378.html

猜你喜欢

: 【React】React中Typecript的使用; 目录一、创建React的TypeScript项目二、使用差别1、基本使用2、Props传值的差别3、State传参三、总结一、创建React的TypeScript项目见：如何在React项目中引入TypeScript？_duansamve的博客-CSDN博客二、使用差别1、基本使用其基本使用和javascript编写React项目时差不多这是一份.tsx文件代码：可以看到和之前的.jsx使用并无太大差别import React, { Component }; 发表于：2023-12-05 浏览：701 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—前后端一体化部署; 目录前言一、系统配置二、ant design pro访问路径配置三、站点访问路径配置前言好长时间没记录了，使用ant design pro有一年了，期间陆续做了好几个项目，从陌生到熟练，还有好多钻研成果没记录，后续有时间陆续补上。之前几个项目一直是前后端分开部署的，需要配置两个站点域名访问，还要解决跨域session问题，这次把一体化部署记录一下。一、系统配置服务端用的LNMP，使用tp6框架，使用宝塔面板管理。tp站点先正常部署，步骤省略，见下图：配置网站目录和运行目录： 编辑配置伪; 发表于：2023-11-28 浏览：829 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—ProTable的使用（一）; 目录一、关于ProTable二、使用步骤1.新建页面2.修改接口3.接口调用4.数据显示和检索1）不同类型内容显示2）列表检索3）列表内容样式设置5.其它1）render的简单使用2）图片点击预览3）翻页总结前言因为项目需要，确定了Ant Design Pro框架来开发后台管理端，刚接触这套框架，而且配套的资料真的很少，只能基于官方demo和网上不完整的学习经验一次次尝试，终于有个像样的结果，记录一下研究学习的成果，也给需要的同学一些帮助。本次学习研究基于Ant Design Pro V5版本，; 发表于：2023-11-28 浏览：836 TAG： #前端 #antd #AntDesignPro

: 【AntDesignPro】Ant Design Pro学习记录—自定义菜单选中; 页面增删改查，打开子页面时，要让父页面菜单选中，参考官网给出的方案菜单的高级用法 - Ant Design Pro 使用的V5版本，直接设置 parentKeys:['/product'] 即可export default [   {     path: '/product',     // 不展示菜单  ; 发表于：2023-11-28 浏览：766 TAG：

: 【AntDesignPro】AntDesignPro使用原生js，箩筐地图的使用; 项目需要把高德地图替换成箩筐地图，WEB前端使用的ant design pro，高德地图有相关的react demo，而箩筐地图只有原生js，结合上一篇文章【AntDesignPro】使用高德地图设置考勤区域，把高德地图修改为箩筐地图，实现考勤范围设置。1 html使用箩筐地图参考上一篇文章【html】箩筐地图的使用，设置考勤范围，了解实现考勤范围设置需要用到的箩筐地图接口。2 ant design pro加载原生js这个是实现功能的核心，只有js正确加载上了，地图的功能才能够正常使用。结合an; 发表于：2024-02-08 浏览：470 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—DrawerForm的使用; 在AntDesignPro中，ModalForm和DrawerForm是我最常用的两个表单组件，配置上，他们有很多相同的地方，也有差异的地方，相比较而言，DrawerForm我使用的更多。ModalForm<ModalForm         title={标题}         width={600}   &n; 发表于：2024-05-17 浏览：468 TAG：

: 【React】使用React实现一个内容滑动组件; 最近在做项目时遇到一个需求，需要让一个列表能够通过点击按钮进行滚动，每次都是一屏的距离，不足则结束。并且，这个列表项是在react-grid-layout中的某一个模块内。所以包裹这个列表的容器会随时发生变化。在完成这个组件后，通过这篇文章总结一下。UI/原型分析那么从上面的功能描述以及项目中的UI，我们可以分析得到这样一个假想图：我们需要实现一个容器来作为我们的可视区域，并且这个容器是可以伸缩的。列表内容如果超出容器的可视区域，那么就会被隐藏。需要左右都有按钮，来支持用户左右滑动内容来查看，每; 发表于：2024-04-10 浏览：330 TAG：

: 【React】16 个实用的 React 库; Web开发中，经常会需要使用第三方库来提高开发效率。今天给大家分享16个非常实用的React第三方库，使用好这些库你可以更轻松、更快速的开发项目，让我们一起看看吧！1.react-hook-formReact-hook-form 是一个用于构建 Web 应用程序的表单库。它支持多种表单类型，包括输入框、下拉框、单选框、多选框等。它还提供了一些自定义选项，可以自定义表单的外观和行为。官方地址：https://react-hook-form.com/2.rechartsRecharts 是一个用于构; 发表于：2024-04-01 浏览：303 TAG：

: 【React】 react 绘制矩形; 在React中绘制矩形，可以使用HTML5的<canvas>元素结合React组件的生命周期方法来实现。以下是一个简单的React组件示例，用于绘制矩形：import React, { Component } from 'react';   class Rectangle extends Component {   componentDid; 发表于：2024-04-01 浏览：313 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用（二）;  目录一、ModalForm高度设置二、ModalForm点击阴影背景，不隐藏弹框三、ProFormSelect联动四、ProFormText关联赋值一、ModalForm高度设置在modalProps中设置bodyStyle:{height:500,overflowY:'scroll'}编辑效果如下：编辑二、ModalForm点击阴影背景，不隐藏弹框同样在modalProps里面，配置maskClosable: false,就可以实现点击弹框外阴影，不隐藏弹框<; 发表于：2023-11-28 浏览：1193 TAG：

栏目分类全部>

推荐文章

