SPA项目动态树、数据表格、分页、CRUD、表单验证

前言

       上一篇文章分享了SPA项目实现首页的导航条以及左侧菜单。本篇文章将要完善SPA项目的功能。将左侧菜单动态绑值，完成页面的数据表格、分页。对其进行增删改查以及增加、修改的表单验证。

---

一、动态树

        原来我们的左侧树菜单是定死的数据，但是我们现在要将它盘活。将它绑为数据库的数据。

        确定模板，我们只有二级菜单，所以改一下之前的界面，得到数据通过v-for将数据绑定到左侧菜单就OK。

        调用后台接口获得，左侧树节点的内容。将数据绑定到界面。

        新建需要跳转页面的菜单项的路由，这里我们用文章管理做示例。因为跳转的地方是在AppMain里面，所以这个路由是AppMain的子路由。

        做好路由的关系映射后，就可以测试看效果。

实现步骤： 

1、确定导航菜单的结构

2、el-menu组件实现路由跳转当前项

3、获得数据

4、绑定数据

5、新建菜单项的路由

6、做好路由映射关系

7、测试

具体的实现步骤就不展示了。直接放代码，可以自己根据实现步骤来完成。 

注意事项：

注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为当前项。

        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">
    
    <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>
<script>
  export default {
    data() {
      return {
        collapsed: false,
        // 存放所有一级菜单
        menus:[]
      }
    },
    created() {
 
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      this.axios.post(url, {}).then(resp => { //代表成功
        console.log(resp);
        this.menus = resp.data.result;
      }).catch(function() { //代表失败
 
      });
      this.$root.Bus.$on('collapsed-aside', (v) => {
        this.collapsed = v;
      })
    }
  }
script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
 
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
 
  .el-menu-item-group__title {
    padding: 0px;
  }
 
  .el-menu-bg {
    background-color: #1f2d3d !important;
  }
 
  .el-menu {
    border: none;
  }
 
  .logobox {
    height: 40px;
    line-height: 40px;
    color: #9d9d9d;
    font-size: 20px;
    text-align: center;
    padding: 20px 0px;
  }
 
  .logoimg {
    height: 40px;
  }
style>

        router/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 '