vue后台系统项目使用element-ui框架实现列表分页功能,获取用户列表数据
效果:
<div class="deit"> <div class="crumbs"> <div class="cantainer"> <el-table style="width: 100%;" :data="userList" align='center'> <el-table-column type="index" width="50"> </el-table-column> <el-table-column label="日期" prop="date" width="180"> </el-table-column> <el-table-column label="姓名" prop="name" width="180"> </el-table-column> <el-table-column label="邮箱" prop="email" width="180"> </el-table-column> <el-table-column label="地址" prop="address" width="200"> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" //下拉框展示的分页条数 :page-size="pagesize" //显示当前行的条数 layout="total, sizes, prev, pager, next, jumper" :total="total">//数据总数userList.length </el-pagination> </div> </div> </div>
需要data中定义,userList接受接口返回的数据
data () { return { currentPage:1, //当前页 pagesize:10,//分页的数据 total: 0, //总页数 userList: [] } },
created() { this.handleUserList() }, methods: { handleSizeChange(val) { this.pagesize = val; this.handleUserData(); }, handleCurrentChange(val){ this.currentPage = val; this.handleUserData(); }, handleUserData() { //接口请求,传递分页参数 let params = { pageSize:this.pageSize, currentPage:this.currentPage //pageNum:this.pageNum } getUserList(params).then(res => { this.userList = res.data; this.total = res.total; //this.total = res.data.length; }) } }