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

最新推荐文章于 2024-05-31 10:04:55 发布

大佬员阿乐

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量512

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_60390944/article/details/121354936

版权

一：动态树功能

1、数据库表

左侧树形菜单数据

2、在leftNav.vue 中的create方法中通过Ajax进行数据读取

<script>
  export default {
    data() {
      return {
        collapsed: false,
        // 存放所有的一级菜单
        menus:[]
      }
    },
    created() {
    let url = this.axios.urls.SYSTEM_MENU_TREE;
    this.axios.post(url,{}).then((response) => {
      console.log(response);
      this.menus=response.data.result;
    }).catch(function(error) {
      console.log(error);
    });
      this.$root.Bus.$on('collapsed-side', (v) => {
        this.collapsed = v;
      })
    }
  }
</script>

3、遍历menus数组，将数据渲染到LeftNav.vue页面中(index为跳转路径 key相当于标识列，唯一，避免选中时的路径重复)

<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" >

<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-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
<i :class="m2.icon"></i>
<span>{{m2.treeNodeName}}</span>
</el-menu-item>

</el-submenu>
</el-menu>
</template>

4、运行结果：

5.定义跳转控件:

1.是用来指定要跳的组件，与 :index合并使用（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 :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">
          <i :class="m2.icon"></i>
          <span>{{m2.treeNodeName}}</span>
        </el-menu-item>

        </el-submenu>
    </el-menu>
</template>

2. 定义锚点（AppMain.vue）

<template>
    <el-container class="main-container">
        <el-aside v-bind:class="asideClass">
            <LeftNav></LeftNav>
        </el-aside>
        <el-container>
            <el-header class="main-header">
                <TopNav></TopNav>
            </el-header>
            <el-main class="main-center">
        <router-view></router-view>

      </el-main>
        </el-container>
    </el-container>
</template>

6、根据数据库构造页面位置

1.在view目录下建立sys目录，然后建立Articles控件（Articles.vue）

<template>
  <div>哈哈哈  你是个憨批嘛</div>
</template>
<script>
</script>
<style>
</style>

2.定义路由(index.js)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Articles from '@/views/sys/Articles'
Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },{
      path: '/AppMain',
      name: 'AppMain',
      component:AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        }
      ]
    }
  ]
})

3.运行结果：