使用vue+iview ,Page实现前端分页处理

使用vue+iview ,Page实现前端分页处理

<div class="section">
      <ul>
        <li v-for="item in homeList" :title="item.title" @click="emitPage(item.pid)">{{item.title}}</li>
      </ul>
      <div class="pageNum">
        <Page :page-size="page.pagesize" :total="page.total" @on-change="onChange"  show-elevator ></Page>
 </div>
  </div>

data(){
    return {
      homeList: [],
      page: {
        pagesize:400, // 一页展示多少数据
        total:0, // 数据总数
        //总分页数
        pageCount: 1, // 当前展示分页
      }
    }
  },
  created: {
  	// 调用 请求数据
  	this.getHome();
  },
methods:{
    getHome() {
    // 这里是使用 axios 请求的数据 
      getHome(`/${this.homeid}`).then(res => {
       // 获取返回的数据
        let data = res.data.data;
        // 将返回的数据长度 赋值给 总条数
        this.page.total = data.length;
        // 创建一个数组
        let arr = [];
        if (data.length) {
        // 遍历获取数据的长度 比如当前点击的是第1页面 获取当前点击的第几页（ this.page.pageCount == 1）
        // 一页所展示的数据比如是400 （this.page.pagesize ===400）判断 是否大于返回的数据 如果大于 就是用返回的数据长度 作为遍历
        // 否则 就继续使用当前的 （三元运算）
          let num = this.page.pagesize * this.page.pageCount > data.length ? data.length : this.page.pagesize * this.page.pageCount;
          //  看当前请求的是第几页的数据 如果是第一页 就从 下标0 开始取值 如果是第二页 就从第一页结束 后的数据开始请求
          // 这里想用 for(.. in ..) 不知道为啥用不了
           let i =(this.page.pageCount -1) * this.page.pagesize;
          for ( ; i < num; i++) {
          // push到数组中
            arr.push(data[i])
          }
          // 循环结束之后在 赋值给 data 中的 homeList
          this.homeList = arr
        }
      })
    },
   // 这个改变事件是 iview page 自带的 可以获取到当前页
    onChange(pageNum) {
    // 这里是将当页 选中的页 赋值给data 中的 page中的 pageCount 用来做上面请求页面数据的
      this.page.pageCount = pageNum;
      // 改变之后需要 获取 数据 调用请求函数
      this.getHome();
    }
    }

有不足之处请指出 谢谢