基于elementUI分页组件实现前端分页功能

最新推荐文章于 2024-07-24 11:13:53 发布

完美不抱怨的小丑

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量744

点赞数 7

文章标签：前端 elementui javascript vue.js

本文链接：https://blog.csdn.net/m0_49969710/article/details/135753440

版权

本文介绍了如何利用ElementUI库中的分页组件在前端展示后端分页数据，包括组件使用、计算属性设置以及事件绑定，详细展示了前端分页逻辑的实现过程。

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

基于elementUI分页组件实现前端分页功能

对于后端返回数据为进行分页的情况，前端可基于elementUI的分页组件实现分页效果。

第一步，使用前端分页组件

	<el-table
       :data="list"
       border
       @select="handleSelectionChange"
       @select-all="handleAllSelectionChange"
     >
        ...
	</el-table>

     <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[10, 30, 50]"
         :page-size="listQuery.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      >
      </el-pagination>

第二步、使用computed计算属性得到分页参数

  computed: {
    // 使用前端实现分页的计算数据
    list() {
      // 分页的起始下标
      const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
      // 分页的末尾下标
      const endIndex = startIndex + this.listQuery.pageNum;
      // 返回切割后的数据
      return this.requestList.slice(startIndex, endIndex);
    },
    // 总条数
    totalNum() {
      return this.requestList.length;
    },
    // 总分页数
    total() {
      return Math.ceil(this.requestList.length / this.listQuery.pageNum);
    },
  },
  data(){
 	 return{
 	 	// 列表数据
     	 requestList: [],
     	 // 分页参数
    	  listQuery: {
      		  page: 1,
      	 	 pageNum: 10,
    	  },
	  }
  }

第三步、绑定事件

    // 每页列表数
    handleSizeChange(val) {
      this.listQuery.pageNum = val;
    },
    // 当前分页数（第几页）
    handleCurrentChange(val) {
      this.listQuery.page = val;
    },