vue导航栏部分的动态渲染及新建页面

对之前的代码进行改进和整理之后,进行了导航栏部分新增页面以及导航栏可以无限级新建目录功能的添加。 首先在需要用到的页面用el-menu进行包裹,并配置路由可跳转的属性 :router=’true’ <el-menu :router='true' class='left_tree'> &lt
摘要由CSDN通过智能技术生成

对之前的代码进行改进和整理之后,进行了导航栏部分新增页面以及导航栏可以无限级新建目录功能的添加。
首先在需要用到的页面用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='中文名称:'>
        
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值