发表于: 2020-01-08 21:36:25
1 1429
今天完成的事情:
1.新的路由参数获取新的列表数据,展示到列表组件中
明天计划的事情:
1.添加搜索框,通过搜索获取过滤后的列表
遇到的问题和收获:
1.使用了生命周期函数,当创建时,执行getArticleList函数
created() {
this.getArticleList()
this.$router.push({name: 'admin', params: {numPage: this.queryInfo.size}})//将改变几条每页的数据传递给路由
this.$router.push({name: 'admin', params: {currentPage: this.queryInfo.page}})//将页面数值传递给路由
this.queryInfo.size = Number(window.sessionStorage.getItem('changeBoxPage'))
this.queryInfo.page = Number(window.sessionStorage.getItem('changePage'))
},
async getArticleList() {
const {data: res} = await this.$http.get('/api/a/article/search', {params: this.queryInfo})
if (res.code !== 0) {
return this.$message.error('获取用户列表失败');
}
this.articleList = res.data.articleList//将数组赋值给data里面的变量
this.queryInfo.total = res.data.total//数据总个数
this.queryInfo.size = res.data.size//每页个数
console.log(res);
首先是执行函数,请求接口,获取到列表数据进行赋值。
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.queryInfo.size = val
this.$router.push({name: 'admin', params: {numPage: val}})//将改变几条每页的数据传递给路由
sessionStorage.setItem('changeBoxPage', this.queryInfo.size)
this.getArticleList()
},
接下来是事件处理函数,点击这里会触发
它将用$router.push的方法将当前的值传递给路由参数。不过存在的问题是,初次进入这里时,页面数据是currentPage和numPage。暂不知道怎么一创建就同时获得getArticleList函数里面的对应页数数据。
然后是页面刷新时,不会保存当前的页码状态,这里还是使用了sessionstorage的方法,不知道有没有新方法。
sessionStorage.setItem('changeBoxPage', this.queryInfo.size)
刷新后又在created里面获取
this.queryInfo.size = Number(window.sessionStorage.getItem('changeBoxPage'))
还有就是改变路由参数,页面跳转这个功能,暂不知道怎么实现
评论