参数配置
- 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
})
}