博客

在页面引入分页组件

<el-pagination
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :current-page="pagination.currentPage"
    :page-size="pagination.size"
    :page-sizes="pagination.PageSizes"
     layout=" sizes, prev, pager, next"
      :total="pagination.total"
    >
    </el-pagination>

在data中写入相应的参数每页展示多少数据，当前页码等等，使用页码请求数据，可使数据加载速度优化。

pagination: {
        PageSizes: [10, 20, 30, 40], //每页展示多少数据
        currentPage: 1, //当前页码
        size: 10, //每页展示多少数据
        total: 0 //总数据量
      },

 当每页展示数据更改时，重新调用请求访问数据

   // 每页几条数据
    handleSizeChange(val) {
      this.pagination.size = val;
      // console.log(`每页 ${val} 条`);
      // console.log(`每页` + this.pagination.size + `条数据`);
      // console.log(`当前页:` + this.pagination.currentPage);
      this.submittable();
    },