SPA项目开发之动态树+数据表格+分页

SPA项目开发之动态树+数据表格+分页

数据信息

动态树代码展示和讲解

LeftNav.vue
数据展示代码

<template>
	<el-menu router :default-active="$route.path" default-active="2" 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-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<el-submenu :key="'id_'+m.treeNodeId" :index="'id_'+m.treeNodeId" v-for="m in menus">
			<template slot="title">
				<i :class="m.icon"></i>
				<span>{
  {m.treeNodeName}}</span>
			</template>
			<el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
				<template slot="title">
					<i :class="m2.icon"></i>
					<span>{
  {m2.treeNodeName}}</span>
				</template>
			</el-menu-item>
		</el-submenu>

	</el-menu>
</template>
<sc