山东大学项目实训——古籍云端检索系统——分页（6）

在搜索框搜索相应内容后，会弹出新的页面，这里采用的方法是在LocalStorage中储存搜索的key值，然后在新页面中根据key值从后端获取数据，下面有两个主要问题：
1.如何正确的显示搜索出来的数值
2.数据量较大的情况下，如何正确的分页

这篇博客讲述一下如何正确的分页
这里采用的分页组件是element-ui的pagination
element的分页组件
完成分页需要使用到三项数据，分别是：
①totalusers 总行数 ②pageSize 每页需要显示的行数 ③startpage 起始页
使用方法：

      <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="pageSize"
                     :total="totalusers" />

pageChange控制页面切换

    async pageChange(page) {
      console.log("page====>>" + page)
      this.startpage = page
      //调用获取列表的方法
      this.getTaskList()
    }

    getTaskList() {
      this.value = JSON.parse(window.localStorage.getItem('search_value'))
      this.totalusers = this.value.length
      console.log(this.value)
    

这样可以保证在每次切换页面的时候，及时的更新当前页面的数据

因为我想让每页最多显示五行数据，所以在v-for数据循环处这么写

 v-for="infos in value.slice((startpage-1)*5,(startpage-1)*5+5)"

这样就可以自由实现分页了