实现分页功能

Z_zpXP

于 2023-06-09 14:57:17 发布

阅读量143

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Z_zpXP/article/details/131127669

版权

    // 页面初始化
    initial() {
      this.initialData = this.queryByPage()
      console.log(this.initialData)
    },
    // 改变页数
    handlePage(val) {
      this.pageData.currentPage = val
      this.initialData = this.queryByPage()
    },
    // 改变条数
    handleSize(val) {
      this.pageData.pageSize = val
      this.pageData.currentPage = 1
      this.initialData = this.queryByPage()
    },
    // 实现分页的方法
    queryByPage() {
      const start = (this.pageData.currentPage - 1) * this.pageData.pageSize
      const end = this.pageData.currentPage * this.pageData.pageSize
      let arr = []
      if (this.value.proTechnicalPersons) {
        arr = this.value.data   // 完整的数据
      }
      this.pageData.total = arr.length
      return arr.slice(start, end) // 进行数据分割
    },