vue+element 分页

最新推荐文章于 2024-01-19 11:29:22 发布

晋级的小猴

最新推荐文章于 2024-01-19 11:29:22 发布

阅读量220

点赞数

分类专栏： vue+element+pagination 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_65047017/article/details/124683235

版权

vue+element+pagination 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个博客展示了如何在前端使用El pagination组件实现分页功能，并通过处理size-change和current-change事件来动态获取不同页面的数据。在beforeCreate生命周期钩子中初始化数据，实现了数据的加载。同时，提供了handleSizeChange和handleCurrentChange方法来更新分页参数并重新获取数据。

摘要由CSDN通过智能技术生成

 <!-- 分页 -->
      <el-pagination
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next,total"
        :total="total"
        style="margin: 10px 0px"
      >
      </el-pagination>

  // 分页
data(){


      pageNum: 1,
      pageSize: 10,
      total: 0,

}

 // 获取全部数据
    getTableData() {
      this.loading = true
      taskSelect({ pageNum: this.pageNum, pageSize: this.pageSize }).then(
        (res) => {
          console.log(res)
          this.loading = false
          this.total = res.data.total
          this.listData = res.data.list
        }
      )
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.getTableData()
    },

可以在这里获取全部数据
beforeCreate() {
      this.getTableData()

    }, //生命周期 - 创建之前