vue+element-ui实现分页 html代码部分<!-- table --> <el-table :data="showData" stripe style="width:100%" v-loading="listLoading"> <el-table-column type="selection" width="55"></el-table-column> <!-- <el-table-column type="index" prop="id" label="编号" width="100" sortable></el-table-column> --> <el-table-column prop="id" label="编号" width="100" sortable></el-table-column> <el-table-column prop="name" label="姓名" width="100" sortable></el-table-column> <el-table-column prop="sex" label="性别" width="100" sortable></el-table-column> <el-table-column prop="age" label="年龄" width="100" sortable></el-table-column> <el-table-column prop="birthday" label="生日" width="120" sortable></el-table-column> <el-table-column prop="address" label="地址" min-width="180" sortable></el-table-column> <el-table-column label="操作"> <template scope="scope"> <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>--> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- table 传值 --> <!-- <List :message='byValue'></List> --> <!-- 分页 paging --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" background :total="total" ></el-pagination>JavaScript代码部分export default { name: "Dashbord", components: { Dialog }, inject: ["reload"], //注入reload方法 data() { return { showData:[], total: 0, pageSize: 10, listLoading: false, currentPage:1, }; }, created(){ this.getUsers(); this.showTable(this.currentPage,this.pageSize); }, // mounted() { // this.getUsers(); // }, methods: { handleSizeChange: function (size) { this.pageSize = size; console.log(this.pageSize); //每页下拉显示数据 this.showTable(this.currentPage,this.pageSize); }, handleCurrentChange: function(currentPage){ this.currentPage = currentPage; console.log(this.currentPage); //点击第几页 this.showTable(this.currentPage,this.pageSize); }, showTable(currentPage,pageSize){ this.listLoading = true; this.$axios({ method: "POST", url: "http://localhost:8080/api/pagingQuery", changeOrigin: true, data: { "start":currentPage, "pageSize":pageSize } }).then(result => { this.listLoading = false; this.showData = result.data; }); } }, }; </script>在el-table中，最重要的是:data,这个数据是根据你分页效果去后台请求返回的数据。在el-pagination中，:page-size表示每页显示的数据条数；:total：表示总的数据数量；:page-sizes：表示我们可以自定义每页显示的数量；:currentPage:表示当前的页码；@size-change="handleSizeChange"，@current-change="handleCurrentChange" 是el-pagination中的事件，表示每页显示的数据和页码的变化；layout:表示分页栏的布局;background:表示是否带背景色需要主要的是start变量，因为在后台程序中，我使用的是limit（m,n）来进行分页查询的:select * from list limit #{start},#{pageSize}start表示开始查询的位置，pageSize表示从开始位置要查询的数量； 如果后台没有做start的处理，在这里我们可以在showTable方法中做处理：currentPage = (currentPage-1) * pageSize；这样就能够正确查询数据