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

2022-07-01 01:02:16 作者：互联网
直接上代码<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>
标签：vue,递归,title,permission,list,列表,meta,key,jsx
来源： https://www.cnblogs.com/shijiex/p/16433156.html