根据公司项目的需求,使用的是element-ui的导航菜单组件实现动态渲染左侧导航条的功能,这里我只写到了四级菜单。
<强>代码部分:
& lt; el-menu类=癳l-menu-vertical-demo”:路由器=罢媸怠眝=?项目、索引)navMenu”:关键=爸甘北?
& lt; el-submenu v='项目。蔡尔兹”:指数=' item.name”:路线='项目。值的类=' edit_wrapper @mouseover。本机=皁verShow @mouseout.native”=皁utHide”比;
& lt;模板槽='标题'比;
& lt;我:类=' item.icon '祝辞& lt;/i>
& lt;跨槽='标题'在{{item.alias}} & lt;/span>
& lt;我类=' iconfont icon-shenpi编辑“v-show='哈哈'祝辞& lt;/i>
& lt;/template>
& lt; el-submenu v=' item1。孩子“v=?item1、索引)的项目。蔡尔兹”:关键=' item1.name”:指数=' item1.name”:路线=癷tem1.value”比;
& lt;模板槽='标题'比;
& lt;我:类=' item1.icon '祝辞& lt;/i>
& lt;跨槽='标题'在{{item1.alias}} & lt;/span>
& lt;/template>
& lt; el-submenu v=' item1(第二条、索引)。蔡尔兹”:关键=' item2.name ' v='第二条。蔡尔兹”:指数=' item2.name”:路线=癷tem2.value”比;
& lt;模板槽='标题'比;
& lt;我:类=' item2.icon '祝辞& lt;/i>
& lt;跨槽='标题'在{{item2.alias}} & lt;/span>
& lt;/template>
& lt; el-submenu v='在第二条(item3、索引)。蔡尔兹”:关键=' item3.name item3 v=：⒆拥摹?:指数=' item3.name”:路线=癷tem3.value”比;
& lt;模板槽='标题'比;
& lt;我:类=' item3.icon '祝辞& lt;/i>
& lt;跨槽='标题'在{{item3.alias}} & lt;/span>
& lt;/template>
& lt; el-menu-item v=' item3 (item4、索引)。蔡尔兹”:关键=' item3.name item4 v=２潭?=null”:指数=' item4.name”:路线=癷tem4.value”比;
& lt; span> {{item4.alias}} & lt;/span>
& lt;/el-menu-item>
& lt;/el-submenu>
& lt; el-menu-item v='在第二条(item3、索引)。蔡尔兹”:关键=' item3.name item3 v=２潭?=null”:指数=' item3.name”:路线=癷tem3.value”比;
& lt; span> {{item3.alias}} & lt;/span>
& lt;/el-menu-item>
& lt;/el-submenu>
& lt; el-menu-item v=' item1(第二条、索引)。蔡尔兹”:关键=' item2.name ' v='第二条。蔡尔兹==null”:指数=' item2.name”:路线=癷tem2.value”比;
& lt; span> {{item2.alias}} & lt;/span>
& lt;/el-menu-item>
& lt;/el-submenu>
& lt; el-menu-item v=' (item1、索引)的项目。蔡尔兹”:关键=' item1.name item1 v=２潭?=null”:指数=' item1.name”:路线=癷tem1.value”比;
& lt; span> {{item1.alias}} & lt;/span>
& lt;/el-menu-item>
& lt;/el-submenu>
& lt; el-menu-item v='项目。蔡尔兹==null”:指数=' item.name”:路线=癷tem.value”比;
& lt;我:类=' item.icon '祝辞& lt;/i>
& lt;跨槽='标题'在{{item.alias}} & lt;/span>
& lt;/el-menu-item>
& lt;/el-menu>
<强>数据部分:
navMenu: [{
名称:“serveList”,
图标:“iconfont icon-shezhi’,
别名:“金融服务目录的,
价值:”,
孩子:(
{
名称:“channelManage”,
图标:”,
别名:“渠道管理”,
价值:”,
孩子:(
{
名称:“channelManage_in”,
图标:”,
别名:“渠道内部管理”,
价值:”,
孩子:(
{
名称:“金融”,
图标:”,
别名:“金融类”,
价值:“serveManage/金融”,
},
{
名称:“no_financial”,
图标:”,
别名:“非金融类”,
价值:“/serveManage/no_financial”,
},
{
名称:“query_class”,
图标:”,
别名:“查询类”,
价值:“/serveManage/query_class”,
},
{
名称:“square_class”,
图标:”,
别名:“冲正类”,
价值:“/serveManage/square_class”,
},
]
},
{
名称:“process_services”,
图标:”,
别名:“流程服务”,
价值:“/serveManage/process_services”
},
{
名称:“cooperation_services”,
图标:”,
别名:“合作方服务”,
价值:“/serveManage/cooperation_services”
},
]
},
{
名称:“saveManage”,
图标:”,
别名:“风险管理”,
价值:“/serveManage/saveManage”
},{
名称:“manageDecision”,
图标:”,
别名:“管理决策”,
价值:“/serveManage/manageDecision”
},{
名称:“businessSupport”,
图标:”,
别名:“业务支持”,
价值:“/serveManage/businessSupport”
},{
名称:“technicalSupport”,
图标:”,
别名:“技术支持”,
价值:“/serveManage/technicalSupport”
}
]
},{
名称:“serveRelation”,
图标:“iconfont icon-shezhi’,
别名:“服务血缘关系的,
价值:“/serveManage/serveRelation”
}]
