react之antd Menu三级菜单的展开收缩(永远只展开一个
2020-04-25 本文已影响0人
大梦无痕
效果图
1587801516.png
]
1587801516(2).png
1587801516(1).png
菜单数据结构(menu.js)
export default [
{
"id":0,
"text":"首页",
"state":"closed",
"iconCls":"icon iconfont icon-shouye",
"url":"/Layout/home"
},
{
"id":1,
"text":"账号/组织",
"state":"closed",
"iconCls":"icon iconfont icon-wode",
"children":[
{
"id":100,
"text":"仓库管理",
"checked":false,
"state":"closed",
"iconCls":"icon iconfont icon-xiangqing",
"url":"/Layout/productList"
},
{
"id":101,
"text":"部门信息",
"checked":false,
"state":"closed",
"iconCls":"icon iconfont icon-xiangqing",
"url":"/list01item02"
},
{
"id":102,
"text":"账号信息",
"checked":true,
"state":"closed",
"iconCls":"icon iconfont icon-yonghuguanli",
"children":[
{
"id":10201,
"text":"管理账号",
"checked":true,
"iconCls":"icon iconfont icon-zhanghuguanli",
"url":"/list01item03"
},
{
"id":10202,
"text":"商家账号",
"checked":true,
"iconCls":"icon iconfont icon-iconfontzhiweiguanli",
"url":"/list01item04"
},
{
"id":10203,
"text":"供应关系",
"checked":true,
"iconCls":"icon iconfont icon-guanxi",
"url":"/list01item05"
},
{
"id":10204,
"text":"领标授信",
"checked":true,
"iconCls":"icon iconfont icon-shouxin",
"url":"/list01item06"
},
{
"id":10205,
"text":"企业QQ",
"checked":true,
"iconCls":"icon iconfont icon-qq1",
"url":"/list01item07"
}
]
},
{
"id":103,
"text":"权限/授权",
"checked":true,
"state":"closed",
"iconCls":"icon iconfont icon-zhuxiao01",
"children":[
{
"id":10301,
"text":"权限管理",
"iconCls":"icon iconfont icon-iconfontliebiao",
"url":"/list01item08"
},
{
"id":10302,
"text":"授权模板",
"iconCls":"icon iconfont icon-iconfontmoban",
"url":"/list01item09"
}
]
}
]
},
{
"id":2,
"text":"基础配置",
"iconCls":"icon iconfont icon-shezhi",
"state":"closed",
"checked":true,
"children":[
{
"id":201,
"text":"领标信息",
"iconCls":"icon iconfont icon-xiaoxiguanli",
"state":"closed",
"checked":true,
"children":[
{
"id":20101,
"text":"辅料管理",
"iconCls":"icon iconfont icon-wenjian",
"url":"list02item01"
},
{
"id":20102,
"text":"套标模板",
"iconCls":"icon iconfont icon-wenjian",
"url":"list02item02"
},
{
"id":20103,
"text":"套标管理",
"iconCls":"icon iconfont icon-wenjian",
"url":"list02item03"
}
]
},
{
"id":202,
"text":"业务配置",
"iconCls":"icon iconfont icon-dingdanguanli2",
"state":"closed",
"checked":true,
"children":[
{
"id":20201,
"text":"品牌",
"iconCls":"icon iconfont icon-wenjian",
"url":"list02item04"
},
{
"id":20202,
"text":"同步品牌",
"iconCls":"icon iconfont icon-wenjian",
"url":"list02item05"
},
{
"id":20203,
"text":"品牌国标码",
"iconCls":"icon iconfont icon-wenjian",
"url":"list02item06"
},
{
"id":20204,
"text":"单据说明",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item07"
},
{
"id":20205,
"text":"审批流程",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item08"
},
{
"id":20206,
"text":"店铺管理",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item09"
},
{
"id":20207,
"text":"同步店铺",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item10"
}
]
},
{
"id":203,
"text":"系统设置",
"iconCls":"icon iconfont icon-shezhi1",
"state":"closed",
"checked":true,
"children":[
{
"id":20301,
"text":"信息模板",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item11"
},
{
"id":20302,
"text":"短信账户",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item12"
},
{
"id":20303,
"text":"邮件账户",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item13"
},
{
"id":20304,
"text":"企业QQ账户",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item14"
},
{
"id":20305,
"text":"基础设置",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item15"
},
{
"id":20306,
"text":"IP授权",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item16"
},
{
"id":20307,
"text":"系统公告",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item17"
},
{
"id":20308,
"text":"用户登录配置",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item18"
},
{
"id":20309,
"text":"信息发送",
"iconCls":"icon iconfont icon-wenjian",
"url":"page/list02/list02item19"
}
]
}
]
}
]
加载数据(Menus.js)
render(){
const data = this.props.list;
var html = [];
for(var i=0;i<data.length;i++){
if(data[i].children){
var li = []
for(var j=0;j<data[i].children.length;j++){
var liData = data[i].children[j];
if(liData.children){
var oli = [];
for(var k=0;k<liData.children.length;k++){
oli.push(
<Menu.Item key={liData.children[k].id}>
<Link to={liData.children[k].url} replace>
<i className={liData.children[k].iconCls}></i>
<span>{liData.children[k].text}</span>
</Link>
</Menu.Item>
)
}
var oul = <SubMenu key={liData.id} title={<span><i className={liData.iconCls}></i><span>{liData.text}</span></span>}>{oli}</SubMenu>;
li.push(oul);
}else{
li.push(
<Menu.Item key={liData.id}>
<Link to={liData.url} replace>
<i className={liData.iconCls}></i>
<span>{liData.text}</span>
</Link>
</Menu.Item>
);
}
}
var ul = <SubMenu key={data[i].id} title={<span><i className={data[i].iconCls}></i><span>{data[i].text}</span></span>}>{li}</SubMenu>;
html.push(ul);
}else{
html.push(
<Menu.Item key={data[i].id}>
<Link to={data[i].url} replace>
<i className={data[i].iconCls}></i>
<span>{data[i].text}</span>
</Link>
</Menu.Item>
)
}
}
return (
<Menu defaultSelectedKeys={['0']}
openKeys={this.state.openKeys}
onOpenChange={this.onOpenChange}
mode="inline"
theme="dark"
collapsed={this.state.collapsed}>
{html}
</Menu>
)
}
计算SubMenu的key集合到数组rootSubmenuKeys,由于我们id是数字，SubMenu组件的key是字符串，+""转化数据类型
componentDidMount(props,nextProps){
var data = this.props.list;
for(var i=0;i<data.length;i++){
if(data[i].children){
for(var j=0;j<data[i].children.length;j++){
var liData = data[i].children[j];
if(liData.children){
this.state.rootSubmenuKeys.push(liData.id+"");
}
}
this.state.rootSubmenuKeys.push(data[i].id+"");
}
}
}
展开收缩方法onOpenChange
onOpenChange = (openKeys) => {
const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
let openList;
if(this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
if(latestOpenKey&&latestOpenKey.length===3){
openList = this.state.openKeys.filter((e)=>{
return e.length!==3;
})
this.setState({
openKeys:openList
});
}else{
this.setState({
openKeys:openKeys
});
}
}else{
if(latestOpenKey&&latestOpenKey.length===3){
openList = this.state.openKeys.filter((e)=>{
return e.length!==3;
})
openList.push(latestOpenKey);
this.setState({
openKeys:openList
});
}else{
this.setState({
openKeys: latestOpenKey ? [latestOpenKey] : [],
});
}
}
}
