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(); }