VUE（4）使用element前端分页

worldbank021419

于 2022-10-27 14:20:08 发布

阅读量548

点赞数

分类专栏：随笔文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/worldbank021419/article/details/127549371

版权

随笔专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1、页面组件设置： el-table（表格）、pagination（页码）

<el-table
               border
           style="width: 100%"
           :data="pageList" //数组类型，列表所需要的数据
           >
               <el-table-column type="index" width="50"> </el-table-column>
           <el-table-column label="文件ID" prop="fileId" width="200"> </el-table-column>
           <el-table-column label="文件名" prop="fileName" width="200"></el-table-column>
           <el-table-column label="文件夹" prop="fileParent" width="200"> </el-table-column>
           <el-table-column label="文件类型" prop="fileType" width="200"></el-table-column>
               <el-table-column label="用户ID" prop="userId" width="200"></el-table-column>            </el-table>

<el-pagination
           background
           layout="prev, pager, next"         //页码布局，上一页、当前页、下一页
           :page-size="pageSize" //每页数据多少条，每页容量
           @current-change="currentChangeHandle" //切换页码时触发，获取当前页面的方法
           :current-page="currentPage" //当前页码
           :total="total"> //总共多少条数据，数据总量
</el-pagination>

2、关键变量设置

data(){
           return{
               pageSize: 20, //每页20条数据
               pageList: [], //单页数据
               totalPage: [], //全部数据
               pageNum: 0, //总共多少页
               total: 0, //总共多少条
               currentPage: 1, //当前页码
           }
  },

3、分页逻辑

currentChangeHandle (val) { // 页码传参，获取 el-pagination 的 val 属性
this.currentPage = val; // 获取页码
this.changeBind(); // 根据当前页码分页
},

changeBind(){
               let that = this;
               this.$axios({
method: 'GET',
url:'http://localhost:8080/file',
}).then(function (response) {

  that.totalPage = response.data.object;                 //获取全部数目
                   that.total = response.data.object.length; //获取数据条数，总共多少条数据
                   that.pageNum = Math.ceil(that.total / that.pageSize) || 1 ;

                                                                                                        //获取页码总数，总共多少页
                   for (let i = 0; i < that.pageNum; i++) {
                   that.pageList = that.totalPage.slice(that.pageSize * (that.currentPage - 1), that.pageSize * that.currentPage);

//获取前 n-1 页到前 n 页之间的数据，截取页码 [n-1 , n ) 之间的页面数据

//分页完成，成功拿到当前页的数据
}
}).catch(function (error) {
console.log(error);
});
},