• AntDesign(React)学习-6 Menu展示数据


    1、官方文档请查看
    https://ant.design/components/menu-cn/
    antPro自带的菜单功能很强大,但是太复杂了,感觉大部分功能都用不上,下面实现一个简单从后台动态获取菜单的功能。

    2、增加SubMenu方法

    2.1 定义

    const { SubMenu } = Menu;
    2.2 增加SubMenu节点
    <SubMenu key="sub3" title="Submenu">
     <Menu.Item key="7">Option 7</Menu.Item>
     <Menu.Item key="8">Option 8</Menu.Item>
    </SubMenu>
    2.3 显示效果

     3、将LeftMenu单独抽离成一个组件

    新建在Src下新建 components/LeftMenuTree目录,然后新建LeftMenuTree.tsx,内容如下

    import {Menu, Icon } from 'antd';
    import React from 'react';
    const { SubMenu } = Menu;
    class LeftMenuTree extends React.Component{
            render() {
                return (
                     <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                <Menu.Item key="1">
                  <Icon type="user" />
                  <span>nav 1</span>
                </Menu.Item>
                <Menu.Item key="2">
                  <Icon type="video-camera" />
                  <span>nav 2</span>
                </Menu.Item>
                <Menu.Item key="3">
                  <Icon type="upload" />
                  <span>nav 3</span>
                </Menu.Item>
                <SubMenu key="sub3" title="Submenu">
                <Menu.Item key="7">Option 7</Menu.Item>
                <Menu.Item key="8">Option 8</Menu.Item>
                </SubMenu>
              </Menu>
                );
            }
    export default LeftMenuTree;

    直接将BasicLayout代码修改为

     运行效果

     4、下面将treemenu改为动态显示,mock目录下增加一个文件名称menu.ts,内容如下

    export default {
      '/api/getmenu': [
        {
          id: 0,
          title: '首页',
          url:'home',
          children: [],
        },
        {
          id: 1,
          title: '权限配置',
          parentid: 0,
          children: [
            {
              id: 2,
              title: '用户管理',
              parentid: 1,
              children: [],
            },
            {
              id: 3,
              title: '角色管理',
              parentid: 1,
              children: [],
            },
          ],
        }
      ]
    };

    5、访问测试
    http://localhost:8000/api/getmenu

    6、下面将修改LeftMenuTree组件动态显示menu.网上找不到可以直接运行demo片段代码,自己了研究了一下午,实现了无限级显示menu,代码如下,从mock读数据大家自己完善

    import { Menu, Icon } from 'antd';
    import React from 'react';
    import Item from 'antd/lib/list/Item';
    const { SubMenu } = Menu;
    class LeftMenuTree extends React.Component {
      state={list:[{"id":0,"title":"首页","url":"home","children":[]},{"id":1,"title":"权限配置","parentid":0,"children":[{"id":2,"title":"用户管理","parentid":1,"children":[]},{"id":3,"title":"角色管理","parentid":1,"children":[]}]}]};
      constructor(props) {
        super(props);
      }
      render() {
        console.log(this.state.list)
        return (
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          {
            this.showMenus(this.state.list)
          }
          </Menu>
        );
      }
      //显示菜单列表
      private showMenus(list): React.ReactNode {
        return list.map((item, index) => (
        this.showMenu(item)
        ));
      }
      //显示菜单项
      private showMenu(item: any) {
        if(item.children.length==0)
        return <Menu.Item key={item.id}>
          <Icon type="file" />
          <span>{item.title}{item.id}</span>
        </Menu.Item>;
        else
        return <SubMenu key={item.id} title={
          <span>
            <Icon type="folder" />
            <span>{item.title}</span>
          </span>
        }>
        {this.showMenus(item.children)}
        </SubMenu>
        
      }
    }
    export default LeftMenuTree;

    7、运行效果如下,大家可以自己增加点击跳转url和get数据方法,后面将更深入的了解这个组件。

  • 相关阅读:
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/12244942.html
  • 最新文章
  • 热门文章
一二三 - 开发者的网上家园