react中使用AntD的树形控件

古城微笑少年丶 2022-01-22 04:21 1231阅读 0赞

### 参数配置 ###

*  checkable：节点前添加 Checkbox 复选框
 *  checkedKeys：就是一个数组，数组中的key与菜单中的key相同的就会显示选中状态
 *  defaultCheckedKeys 默认选中复选框的树节点
 *  defaultExpandAll 默认展开所有树节点
 *  onCheck 点击复选框触发

### 数据流 ###

#### 默认的菜单数据 menuList ####

const menuList =
      [
        { 
          key: "/", title: "首页", path: "/",
          children: [
            { 
              key: "/ui", title: "UI", children: [
                {  key:"/ui/button",path: "/ui/button", title: "button" }, {  key:"/ui/tab",path: "/ui/tab", title: "tab" }
              ]
            },
            {  key: "/user", path: "/user", title: "用户" },
            { 
              key: "/article", title: "文章", children: [
                {  key:"/articleList",path: "/articleList", title: "文章列表" }, { key:"/articleAdd", path: "/articleAdd", title: "添加文章" }
              ]
            },
            { 
              key: "/chart", title: "图表", children: [
                {  key:"/chart/bar",path: "/chart/bar", title: "柱状图" }, { key:"/chart/pie", path: "/chart/pie", title: "饼图" }
              ]
            },
          ]
        }
      ]

这里把key设置成路径具有唯一性

#### 匹配每行数据中的router ####

getMenuList(routers){ 
      let  checkedKeys=routers.map((elem)=>{ 
        return elem.key
      })
      this.setState({ 
        checkedKeys
      })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，1231人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt树形控件QTreeView使用指南

Qt树形控件QTreeView使用指南在Qt中，树形控件是一种常用的数据展示方式。而QTreeView就是其中的一种树形控件。它可以显示复杂的层级结构数据，并且支持用户的交

野性酷女/ 2023年10月14日 20:08/ 0 赞/ 12 阅读

相关 React 组件封装之 Tree 树形控件

React 组件封装之 Tree 树形控件一、Tree 树形结构二、使用案例三、API 使用指南四、源代码五、总结一、Tre

女爷i/ 2022年11月20日 08:01/ 0 赞/ 1177 阅读

相关 antd--tree树形控件前、后缀图标

文章目录一、antd官网二、代码 1.实现效果 2.读入数据 -------------------- 一、antd官网

系统管理员/ 2022年10月06日 04:51/ 0 赞/ 231 阅读

相关树形控件CTreeCtrl的使用

树形控件在界面编程中应用十分普遍，如在资源管理器中和树形结构显示书的目录等，我们一步步研究树形控件的使用。在对话框界面上首先拖动创建一个树，一般我们改变三个属性： Has

ゞ浴缸里的玫瑰/ 2022年09月20日 15:22/ 0 赞/ 234 阅读

相关 ElementUI Tree 树形控件

一、概述用清晰的层级结构展示信息，可展开或折叠。官方网站：[https://element.eleme.cn/\/zh-CN/component/tree][htt

矫情吗；*/ 2022年08月28日 13:53/ 0 赞/ 275 阅读

相关 Extjs树形控件入门

Extjs树形控件由Ext.tree.TreePanel类定义,控件的名称为TreePanel,TreePanel继承自Panel类,在Extjs中使用树形控件其实很简单.

梦里梦外;/ 2022年08月23日 14:42/ 0 赞/ 250 阅读

相关 react + antd Modal组件销毁属性使用

1，效果图如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

￡神魔★判官ぃ/ 2022年02月19日 11:25/ 0 赞/ 691 阅读

相关 react中使用AntD表单

react中使用AntD表单 1.双向数据绑定 render() { const { getFieldDecorator } = thi

àì夳堔傛蜴生んèń/ 2022年01月25日 18:13/ 0 赞/ 441 阅读

相关 react中使用AntD的树形控件

参数配置 checkable：节点前添加 Checkbox 复选框 checkedKeys：就是一个数组，数组中的key与菜单中的key相同的就会显示选中状态

古城微笑少年丶/ 2022年01月22日 04:21/ 0 赞/ 1232 阅读

相关树形控件的使用

树形控件TreeCtrl和下节要讲的 [列表控件 ListCtrl][ListCtrl]在系统中大量被使用，例如Windows资源管理器就是一个典型的例子。树形控件可以用于

骑猪看日落/ 2021年10月24日 05:38/ 0 赞/ 385 阅读