vue+element-ui实现分页
Posted buries
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+element-ui实现分页相关的知识,希望对你有一定的参考价值。
我使用得是el-table+el-pagination来实现的,
话不多说,直接上代码
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;
这样就能够正确查询数据
以上是关于vue+element-ui实现分页的主要内容,如果未能解决你的问题,请参考以下文章
git--------------vue+element-ui实现分页效果-------------劉