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

开启eclipse项目和spa项目

使用到的表及数据


（有一级节点和二级节点）

一，LeftNav.vue动态树功能

==================

1，在create方法中通过Ajax进行数据读取

created() {

// 拿到左侧树形菜单的地址

let url = this.axios.urls.SYSTEM_MENU_TREE;

this.axios.post(url, {}).then((resp) => {

console.log(resp);

}).catch(function(error) {

console.log(error);

});

// 监听bus，bus是vue实例，所以有$on方法

// 定义的方法，v就是传递来的this.collapsed变量

this.$root.Bus.$on(“collapsed-aside”, (v) => {

this.collapsed = v;

});

}

用正确的数据库账号和密码登录

F2查看控制台数据 ，拿到的数据呈现父子层级关系

2，template放单个左侧菜单样式

一级菜单

二级菜单

3，获取数据

定义一个menus数组用来存放所有的一级菜单（数据从钩子函数中获取的data里面的result中获取，可以看到是一个数组）， 并在钩子函数中对定义的menus进行修改（钩子函数可以对定义的变量进行修改）

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(error) {

console.log(error);

});

// 监听bus，bus是vue实例，所以有$on方法

// 定义的方法，v就是传递来的this.collapsed变量

this.$root.Bus.$on(“collapsed-aside”, (v) => {

this.collapsed = v;

});

}

}

4，将一级菜单和二级菜单遍历出来

:index=“‘id_’+m.treeNodeId” （必须这么拼接）通过treeNodeId标识菜单的唯一性

<el-submenu :index=“‘id_’+m.treeNodeId” v-for=“m in menus”>

<i :class=“m.icon”>

{{m.treeNodeName}}

<el-menu-item :index=“‘id_’+m2.treeNodeId” v-for=“m2 in m.children”>

<i :class=“m2.icon”>

{{m2.treeNodeName}}

效果如下

5，点击文章管理进行跳转

key是id标识唯一性， index是路由跳转路径

{{m2.treeNodeName}}

标识index为跳转路径

router :default-active="$route.path"是用来指定要跳的组件，与 :index合并使用；

<el-menu  router :default-active=“$route.path” class=“el-menu-vertical-demo” background-color=“#334157” text-color=“#fff”

active-text-color=“#ffd04b” :collapse=“collapsed”>

二，右侧文章的数据表格

===========

1,新建sys目录和Article.vue文件

2，AppMain.vue定义锚点

3,配置路由

src/router/index.js

import Articles from ‘@/views/sys/Articles’

要放在AppMain.vue的children下

{

path: ‘/sys/Articles’,

name: ‘Articles’,

component: Articles

}

4，增加表格组件

（外层记得放一个div，因为template里面只允许放一个根标签）

<el-table size=“small” :data=“listData” highlight-current-row border element-loading-text=“拼命加载中”

style=“width: 100%;”>

5，获取数据

定义一个listData****数组用来存放所有的文章（数据从钩子函数中获取的data里面的result中获取，可以看到是一个数组）， 并在钩子函数中对定义的listData进行修改（钩子函数可以对定义的变量进行修改）

export default {

name: ‘Articles’,

data() {

return {

listData: []

}

},

created() {

**// 拿到文章列表的地址

let url = this.axios.urls.SYSTEM_ARTICLE_LIST;**

this.axios.post(url, {}).then((resp) => {

console.log(resp);

// 钩子函数可以对定义的变量进行修改

this.listData = resp.data.result;

}).catch(function(error) {

console.log(error);

});

// 监听bus，bus是vue实例，所以有$on方法

// 定义的方法，v就是传递来的this.collapsed变量

this.$root.Bus.$on(“collapsed-aside”, (v) => {

this.collapsed = v;

});

}

}

效果如下

 三，数据表格的分页

==========================================================================================================================================================================================================================

**1、**分页查询功能

可以从element官网中找到相关组件

@size-change事件，每页显示的数据