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

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事件，每页显示的数据

@current-change事件，当前页改变的事件

分页条

<el-pagination style=“margin-top: 20px;” @size-change=“handleSizeChange” @current-change=“handleCurrentChange”

:current-page=“formInline.page” :page-sizes=“[10, 20, 30, 50]” :page-size=“100”

layout=“total, sizes, prev, pager, next, jumper” :total=“formInline.total”>

2、定义组件中的数据和方法

export default {

name: ‘Articles’,

data() {

return {

listData: [],

formInline: {

page: 1,

rows: 10,

total: 0,

title: ‘’

}

}

},

methods: {

handleSizeChange(rows) {

console.log(“当前页查询数据量：” + rows)

this.formInline.page = 1;

this.formInline.rows = rows;

this.search();

},

handleCurrentChange(page) {

console.log(“当前页为：” + page)

this.formInline.page = page;

this.search();

},

doSearch(param) {

// 拿到文章列表的地址

let url = this.axios.urls.SYSTEM_ARTICLE_LIST;

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

console.log(resp);

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

this.listData = resp.data.result;

this.formInLine.total = resp.data.pageBean.total;

}).catch(function(error) {

console.log(error);

});

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

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

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

this.collapsed = v;

});

},

// 搜索功能

search() {

this.doSearch(this.formInline);

}

},

created() {

this.doSearch({});

}

}

为了方便的处理传参和不传参问题，将create中的代码挪到doSearch中，成为公共方法

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

this.collapsed = v;

});

},

// 搜索功能

search() {

this.doSearch(this.formInline);

}

},

created() {

this.doSearch({});

}

}

为了方便的处理传参和不传参问题，将create中的代码挪到doSearch中，成为公共方法

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心