element-plus动态渲染el-menu(vue3)
样式如上
需要typescript，vue3环境下运行
需要下载依赖如下
npm install sass-loader node-sass --save-dev
npm install element-plus --save
npm install [email protected] --save
main.ts中
import 'view-ui-plus/dist/styles/viewuiplus.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)需要scss以及，element-plus
![]()
{{ menus.title }}
{{
childvl.title
}}
![]()
{{ menus.title }}
下面是JSON文件内容
{
"code": 200,
"message": "操作成功",
"data": [
{
"index": "ceshione",
"icon": "https://img.icons8.com/3d-fluency/2x/fingerprint.png%202x,%20https://img.icons8.com/3d-fluency/1x/fingerprint.png",
"title": "测试",
"menuId": "1082",
"component": null,
"childs": [
{
"index": "ceshitwo",
"icon": "#",
"title": "测试",
"menuId": "1087",
"component": null,
"childs": null
},
{
"index": "ceshithree",
"icon": "#",
"title": "测试",
"menuId": "1088",
"component": null,
"childs": null
}
]
},
{
"index": "ceshifore",
"icon": "https://img.icons8.com/3d-fluency/2x/fingerprint.png%202x,%20https://img.icons8.com/3d-fluency/1x/fingerprint.png",
"title": "测试",
"menuId": "1083",
"component": null,
"childs": [
{
"index": "ceshifive",
"icon": "#",
"title": "测试",
"menuId": "1089",
"component": null,
"childs": null
}
]
},
{
"index": "",
"icon": "https://img.icons8.com/3d-fluency/2x/fingerprint.png%202x,%20https://img.icons8.com/3d-fluency/1x/fingerprint.png",
"title": "测试",
"menuId": "1084",
"component": null,
"childs": [
{
"index": "ceshisix",
"icon": "#",
"title": "测试",
"menuId": "1001",
"component": null,
"childs": null
}
]
},
{
"index": "#",
"icon": "https://img.icons8.com/3d-fluency/2x/fingerprint.png%202x,%20https://img.icons8.com/3d-fluency/1x/fingerprint.png",
"title": "测试",
"menuId": "1086",
"component": null,
"childs": [
{
"index": "ceshieight",
"icon": "#",
"title": "测试",
"menuId": "1089",
"component": null,
"childs": null
}
]
}
]
}