其他分享
首页 > 其他分享> > vue中使用jsx方法进行递归渲染

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>

标签:vue,递归,title,permission,list,列表,meta,key,jsx
来源: https://www.cnblogs.com/shijiex/p/16433156.html