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

目录

一、动态树

 二、数据表格

 三、分页

一、动态树

 方法leftNAv.vue

<script>
	export default {
        data(){
          return {
            collapsed:false,
            //存放一级菜单
            menus:[]
          }
        },
      created() {
 
        let url = this.axios.urls.SYSTEM_MENU_TREE;
        //this指的是vue实例
        this.axios.post(url,{})
          .then(resp => {//代表成功 箭头函数 jdk8的语法
          console.log(resp);
          this.menus=resp.data.result;//赋值
          }).catch(function (error){//代表失败
          console.log(error);
          });
      //    从总线上取出this.collapsed变量
        this.$root.Bus.$on("collapsed-side",(v) => {
          this.collapsed=v;
        })
        }
 
  }
</script>

 布局

<template>
	<el-menu 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-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 :index="'id_'+m.treeNodeId" :v-for="m in menus">
        <template slot="title">
        				<i class="m.icon"></i>
        				<span>{
  {m.treeNodeName}}</span>
      </template>
			<el-menu-ite