发表于: 2020-01-07 23:23:39

1 1572



今天完成的事情:

1.为分页器绑定事件,点击获取页码,传值给路由


明天计划的事情:

1.分页器打包,写成一个自定义的元素组件

2.列表添加搜索框,通过搜索获取过滤后的列表


遇到的问题和收获:

1.使用params传参,this.$router.push({name:'home',params: {id:'1'}}) 

{
   path: '/admin/:currentPage/:numPage',
   name: 'admin',
   component: ArticleAdmin
}


在列表选项的index里面也写入

<el-menu-item index="/admin/currentPage/numPage" @click="saveNavState('/admin/currentPage/numPage')"><i
       class="el-icon-document"></i>Article管理
</el-menu-item>


最后在组件处,对应的name传入获取到的当前页码

handleSizeChange(val) {
   console.log(`每页 ${val} `);
   this.queryInfo.size = val

   this.$router.push({name:'admin',params:{numPage:val}})//将改变几条每页的数据传递给路由

   window.sessionStorage.setItem('changeBoxPage',val)
   this.getArticleList()
},
//监听页码值改变的事件,改变页数就会触发
handleCurrentChange(val) {
   console.log(`当前页: ${val}`);
   this.queryInfo.page = val;
   window.sessionStorage.setItem('changePage',val)

   this.$router.push({name:'admin',params:{currentPage:val}})//将页面数值传递给路由

   this.getArticleList()//page值改变了,所以要重新获取数据传过去

}


显示效果

还要优化一下。不然一进来是这种。



下面就是新增搜索等功能了。继续吧




返回列表 返回列表
评论

    分享到