Vue树表格分页的实现方法详解_vue.js

export default {
//服务器
'SERVER': 'http://localhost:8080/webserver',
//登陆请求
'SYSTEM_USER_DOLOGIN': '/userMsg/userAction!login.action', //登陆
//获取动态树数据请求
'SYSTEM_MODULE_REQ': '/sysMsg/sysMsgAction!getModules.action',
//获取完整的请求地址
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}

//声明周期钩子函数，此时的Vue实例已经创建，且data和methods已经创建，但没有开始编译模板
//利用该钩子函数获取动态树数据
created: function() {
let url = this.axios.urls.SYSTEM_MODULE_REQ;
this.axios.get(url, {}).then(resp => {
//在data中声明moduleDatas数组，接收返回的数据，以便于在template中使用数据双向绑定
this.moduleDatas = resp.data;
console.log(resp.data);
}).catch(resp => {});
//登录成功后默认显示系统首页
this.$router.push("/Home");
}



{{m2.text}}





首页


//获取书本信息
'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',

export default {
name: 'BookList',
data: function() {
return {
bookname: '',
books: []
}
},
methods: {
qry: function() {
let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
this.axios.post(url, {
bookname: this.bookname
}).then(resp => {
console.log(resp);
this.books = resp.data.data;
}).catch(error => {
console.log(error);
});
}
}
}

qry: function() {
let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
this.axios.post(url, {
bookname: this.bookname,
//分页参数
page: this.page,
rows: this.rows
}).then(resp => {
console.log(resp);
this.books = resp.data.data;
//获取总页数
this.total = resp.data.total;
}).catch(error => {
console.log(error);
});
}

//当每页显示的记录数发生变化时，设置当前页码为1，执行查询。
handleSizeChange: function(rows) {
this.rows = rows;
this.page = 1;
this.qry();
},
//当前页码发生变化时，执行查询
handleCurrentChange: function(page) {
this.page = page;
this.qry();
}