对之前的代码进行改进和整理之后,进行了导航栏部分新增页面以及导航栏可以无限级新建目录功能的添加。
首先在需要用到的页面用el-menu进行包裹,并配置路由可跳转的属性 :router=’true’
<el-menu :router='true' class='left_tree'>
<left-tree :navMenu = 'navMenu'></left-tree>
</el-menu>
然后在被引入的组件中,进行递归循环渲染数据,这里我实现的是可以新增,修改,删除页面的功能
<template>
<ul class='left_tree'>
<template v-for='item in navMenu'>
<el-submenu v-if='item.childs' :index='item.value' class='edit_wrapper' :key='item.id'>
<template slot='title'>
<i :class='item.icon'></i>
<span slot='title'>{
{item.alias}}</span>
<el-popover
popper-class = 'popover_show'
placement="right-start"
width="100"
trigger="click"
v-model="item.visible"
:index="item.id"
>
<div class='edit_container'>
<button @click='handleAdd(item)'>新增</button>
<button @click='handleEdit(item)'>修改</button>
<button @click='handleDelete(item)'>删除</button>
</div>
<span slot="reference" @click='handleShow(item)' class='iconfont icon-sandianshu edit'></span>
</el-popover>
</template>
<left-tree :navMenu = 'item.childs'></left-tree>
</el-submenu>
<el-menu-item v-if='!item.childs' :index='item.value' :key='item.id'>
<i :class='item.icon'></i>
<span slot='title'>{
{item.alias}}</span>
<el-popover
popper-class = 'popover_show'
placement="right-start"
width="100"
trigger="click"
v-model="item.visible"
:index="item.id"
>
<div class='edit_container'>
<button @click='handleAdd(item)'>新增</button>
<button @click='handleEdit(item)'>修改</button>
<button @click='handleDelete(item)'>删除</button>
</div>
<span slot="reference" @click='handleShow(item)' class='iconfont icon-sandianshu edit'></span>
</el-popover>
</el-menu-item>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="500px"
class='dialog1'
>
<el-form :model='form' label-width='120px' ref='form'>
<el-form-item label='中文名称:'>