发表于: 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'))




还有就是改变路由参数,页面跳转这个功能,暂不知道怎么实现







返回列表 返回列表
评论

    分享到