Vue --- 动态树+数据表格+分页

目录

1. 动态生成NavMenu导航菜单(只支持2级菜单)

1.1 表结构

1.2 页面结构      

1.3 vue+element的el-menu组件实现路由跳转及当前项的设置

2 数据表格+分页

---

1. 动态生成NavMenu导航菜单(只支持2级菜单)

1.1 表结构

 父类的pid是子类的id

1.2 页面结构      

      <el-menu key="" index="">
        <el-submenu>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <template slot="title">分组一</template>
          <el-menu-item route="">

1.3 vue+element的el-menu组件实现路由跳转及当前项的设置

      <el-menu router :default-active="$route.path">
      <el-menu-item index="/company/userManager">用户管理</el-menu-item>
   
      注1：要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
      注2：导航当前项，在el-menu标签中绑定  :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

      注3：后台t_tree_node表有几个节点的url为空，则会导致几个节点样式会一致

代码案例：

------------------LeftAside.vue
<template>
	<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-o