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

目录

一、树形菜单

1、要确定静态树形菜单节点的样式排版

2、要获取树形节点的数据

3、通过拿到的数据，渲染树形节点

二、书籍列表查询 

---

一、树形菜单

1、要确定静态树形菜单节点的样式排版

2、要获取树形节点的数据

created() {
			//从总线上取出this.collapsed变量
			this.$root.Bus.$on("collapsed-side", v => {
				this.collapsed = v;
			});
			
			//SYSTEM_MENU_TREE
			let url = this.axios.urls.SYSTEM_MENU_TREE;
			//this指的是vue实例
			this.axios.post(url, {})
			.then(resp => {
				console.log(resp);
				this.menus = resp.data.result;
			}).catch(function(){
				//代表失败
			})
		}
	}

3、通过拿到的数据，渲染树形节点

        v-for渲染节点

        定义渲染节点的变量

LeftNav.vue：

Articles.vue：

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'

import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
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/Arcicles',
          name: 'Arcicles',
          component: Arcicles
        }
      ]
    }
  ]
})

二、书籍列表查询 

文章查询功能

1、el-table 列表组件
2、利用axios调用后台的文章查询接口 ——> created   （无传参）
3、el-pagination 列表组件
        size-change        页大小改变调用事件

        current-change    页面改变调用的事件

 4、优化
        将调用后台的文章查询接口的代码进行封装，为了复用

5、el-form  查询的筛选条件    （传参）
 

LeftNav.vue：

Articles.vue：

分页条：

		
		
 
handleSizeChange(rows) {
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				this.formInline.page = page;
				this.search();
			}