当前位置: 首页 > 工具软件 > Pagination2 > 使用案例 >

Vue中使用ElementUI的pagination组件 实现分页

诸葛品
2023-12-01

分页请求原理:

很多情况,前端请求回来的数据是一个数组,这个数组数据量可以达到上万条,这样数据量过大,会导致前端卡顿,影响用户体验。

所以就需要分页,后端从数据库查数据时通过 如下语句

select * from article  limit startNumber,pageSize

后端需要计算从哪个索引开始,公式为

startNumber = (页码-1)*pageSize

前端分页还是后端分页?

答:当然是后端做分页

没有后端很难模拟分页请求,思路其实很简单,每次查询的数据直接for循环渲染就可以了。

注意需要后端的数据包含如下

1. total:数据总条数,用来给前端分页器赋值
2. data: 数组是表格需要的数据

前端需要确定的数据

1. pageSize:页码大小,就是一次性请求多少数据,它用来规定 分页器 显示条数
2. currentPage: 当前为第几页,发请求时用来确定请求的是第几页

代码如下

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.age }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :page-size="pageSize"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handlePageChange"
      @prev-click="handlePageChange"
      @next-click="handlePageChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表格请求的数据
      tableData: [
        {
          id: 1,
          name: "滕滕",
          age: 24,
        },
        {
          id: 2,
          name: "滕滕",
          age: 24,
        },
        {
          id: 3,
          name: "滕滕",
          age: 24,
        },
        {
          id: 4,
          name: "滕滕",
          age: 24,
        },
      ],
      pageSize: 3, //一次渲染数据量
      total: 7, //数据总条数
    };
  },
  methods: {
    //请求数据
    getDataList() {

    },
    //处理:点击页码、上一页、下一页按钮事件
    handlePageChange(pageNumber) {
      this.currentPage = pageNumber;
      this.$nextTick(() => {
        //调用请求数据
        this.getDataList();
      });
    },
  },
};
</script>

 类似资料: