vue中使用jsx方法进行递归渲染
直接上代码<script>
export default { name: 'HOME', data() { return { list: [{ key: "dashboard", icon: "ant-design", title: "仪表盘", children: [{ key: "analysis", title: "分析页", path: "dashboard/analysis", meta: { permission: ["dashboard"], title: "仪表盘.分析页", } }, { key: "workplace", title: "工作台", path: "dashboard/workplace", meta: { permission: ["dashboard"], title: "仪表盘.工作台", } }, ], }, { key: "map", icon: "environment", title: "地理信息", children: [{ key: "map", title: "查询周边", path: "environment/map", meta: { permission: ["environment"], title: "地理信息.搜索地址", } }, { key: "tianqi", title: "天气预报", path: "environment/tianqi", meta: { permission: ["environment"], title: "地理信息.天气预报", } },], }, { key: "form", icon: "form", title: "表单页", children: [{ key: "base", title: "基础表单", path: "form/base", meta: { permission: ["form"], title: "表单页.基础表单", } }, { key: "step", title: "分步表单", path: "form/step", meta: { permission: ["form"], title: "表单页.分步表单", } }, { key: "advanced", title: "高级表单", path: "form/advanced", meta: { permission: ["form"], title: "表单页.高级表单", } }, ], }, { key: "list", icon: "table", title: "列表页", children: [{ key: "table", title: "查询列表", path: "list/table", meta: { permission: ["list"], title: "列表页.查询列表", } }, { key: "basic", title: "标准列表", path: "list/basic", meta: { permission: ["list"], title: "列表页.标准列表", } }, { key: "card", title: "卡片列表", path: "list/card", meta: { permission: ["list"], title: "列表页.卡片列表", } }, { key: "search", title: "搜索列表", children: [{ key: "article", title: "搜索列表(文章)", path: "list/search/article", meta: { permission: ["list", "search"], title: "列表页.搜索列表.搜索列表(文章)", }, children: [{ key: "analysis", title: "分析页", path: "dashboard/analysis", meta: { permission: ["dashboard"], title: "仪表盘.分析页", } }, { key: "workplace", title: "工作台", path: "dashboard/workplace", meta: { permission: ["dashboard"], title: "仪表盘.工作台", } }, ], }, { key: "project", title: "搜索列表(项目)", path: "list/search/project", meta: { permission: ["list", "search"], title: "列表页.搜索列表.搜索列表(项目)", } }, { key: "application", title: "搜索列表(应用)", path: "list/search/application", meta: { permission: ["list", "search"], title: "列表页.搜索列表.搜索列表(应用)", } }, ], }, ], }, { key: "account", icon: "user", title: "个人页", children: [{ key: "center", title: "个人中心", path: "account/center", meta: { permission: ["account"], title: "个人页.个人中心", } }, { key: "settingsBasic", title: "个人设置", path: "account/settingsBasic", meta: { permission: ["dashboard"], title: "个人页.个人设置", } }, ], }, ], } }, // render == 渲染函数
/*
在render函数中通过传递列表的方式进行递归渲染
*/ render() { return ( <div> {this.show(this.list)} </div> ) },
// 方法 methods: { show(list) { return (<div> {list && list.map(item => ( <div key={item.key}> △ {item.title} {item.children ? (<div>{this.show(item.children):''}</div>)} </div> ))} </div>) } },
} </script>
<script>
export default {
name: 'HOME',
data() {
return {
list: [{
key: "dashboard",
icon: "ant-design",
title: "仪表盘",
children: [{
key: "analysis",
title: "分析页",
path: "dashboard/analysis",
meta: {
permission: ["dashboard"],
title: "仪表盘.分析页",
}
},
{
key: "workplace",
title: "工作台",
path: "dashboard/workplace",
meta: {
permission: ["dashboard"],
title: "仪表盘.工作台",
}
},
],
},
{
key: "map",
icon: "environment",
title: "地理信息",
children: [{
key: "map",
title: "查询周边",
path: "environment/map",
meta: {
permission: ["environment"],
title: "地理信息.搜索地址",
}
}, {
key: "tianqi",
title: "天气预报",
path: "environment/tianqi",
meta: {
permission: ["environment"],
title: "地理信息.天气预报",
}
},],
},
{
key: "form",
icon: "form",
title: "表单页",
children: [{
key: "base",
title: "基础表单",
path: "form/base",
meta: {
permission: ["form"],
title: "表单页.基础表单",
}
},
{
key: "step",
title: "分步表单",
path: "form/step",
meta: {
permission: ["form"],
title: "表单页.分步表单",
}
},
{
key: "advanced",
title: "高级表单",
path: "form/advanced",
meta: {
permission: ["form"],
title: "表单页.高级表单",
}
},
],
},
{
key: "list",
icon: "table",
title: "列表页",
children: [{
key: "table",
title: "查询列表",
path: "list/table",
meta: {
permission: ["list"],
title: "列表页.查询列表",
}
},
{
key: "basic",
title: "标准列表",
path: "list/basic",
meta: {
permission: ["list"],
title: "列表页.标准列表",
}
},
{
key: "card",
title: "卡片列表",
path: "list/card",
meta: {
permission: ["list"],
title: "列表页.卡片列表",
}
},
{
key: "search",
title: "搜索列表",
children: [{
key: "article",
title: "搜索列表(文章)",
path: "list/search/article",
meta: {
permission: ["list", "search"],
title: "列表页.搜索列表.搜索列表(文章)",
},
children: [{
key: "analysis",
title: "分析页",
path: "dashboard/analysis",
meta: {
permission: ["dashboard"],
title: "仪表盘.分析页",
}
},
{
key: "workplace",
title: "工作台",
path: "dashboard/workplace",
meta: {
permission: ["dashboard"],
title: "仪表盘.工作台",
}
},
],
},
{
key: "project",
title: "搜索列表(项目)",
path: "list/search/project",
meta: {
permission: ["list", "search"],
title: "列表页.搜索列表.搜索列表(项目)",
}
},
{
key: "application",
title: "搜索列表(应用)",
path: "list/search/application",
meta: {
permission: ["list", "search"],
title: "列表页.搜索列表.搜索列表(应用)",
}
},
],
},
],
},
{
key: "account",
icon: "user",
title: "个人页",
children: [{
key: "center",
title: "个人中心",
path: "account/center",
meta: {
permission: ["account"],
title: "个人页.个人中心",
}
},
{
key: "settingsBasic",
title: "个人设置",
path: "account/settingsBasic",
meta: {
permission: ["dashboard"],
title: "个人页.个人设置",
}
},
],
},
],
}
},
render() {
return (
<div>
{this.show(this.list)}
</div>
)
},
methods: {
show(list) {
return (<div>
{list && list.map(item => (
<div key={item.key}>
△ {item.title}
<div style="margin-left:50px">{this.show(item.children)}</div>
</div>
))}
</div>)
}
},
mounted() {
this.show()
}
}
</script>
浙公网安备 33010602011771号