vue2.0 + element-ui2实现分页

当我们向服务端请求大量数据的时候，并要在页面展示出来，怎么办？这个时候一定会用到分页。

本次所使用的是vue2.0+element-ui2.12实现一个分页功能，element-ui这个组件特别丰富，它给我提供了很多Pagination分页方式，这里使用其中一个快速完成分页功能。

最终效果展示：

下面说说实现原理及附上完整的代码，包括服务端代码（python）。

<template>
    <div>
        <el-table :data="tableData" border style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="标题" prop="title" width="680"> </el-table-column> <el-table-column label="日期" prop="date" width="180"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-row> <el-col :span="24"> <div style="padding-top: 20px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </el-col> </el-row> </div> </template>

页面中的当前数据、分页中的当前页码、每页显示的数据条数及数据总条数需要先在data中定义：

    data() {
      return {
        tableData: [],
        currentPage: 1,
        pagesize: 10,
        total: 0
      }
    }

页面中的实际数据需要通过异步的方式从后台读取，这里使用的是axios，methods中后面两个函数是分页用到的，作用是什么？代码中有说明：

methods: {
      getList(){
          let that = this;
          let param = new URLSearchParams();
          param.append('pageSize', this.pagesize); param.append('pageNumber', this.currentPage); that.$axios({ method: 'post', url: 'http://localhost:9999/article/all_post/', data: param }) .then(function(res){ console.log(res); let len = res.data.rows.length; that.total = res.data.total; that.tableData = []; for(let i = 0; i<len; i++){ that.tableData.push({ id: res.data.rows[i].id, title: res.data.rows[i].title, date: res.data.rows[i].create_time, desc: res.data.rows[i].content }); } }) .catch(function(err){ that.$message(err); }) }, handleSizeChange: function (size) { this.pagesize = size; this.getList(); console.log(this.pagesize) //每页下拉显示数据 }, handleCurrentChange: function(currentPage){ this.currentPage = currentPage; console.log(this.currentPage) //点击第几页 this.getList(); } }, mounted(){ this.getList(); }

服务端代码如下（通过django实现）：

@csrf_exempt
def all_post(request): if request.method == 'POST': pageSize = int(request.POST.get('pageSize')) pageNumber = int(request.POST.get('pageNumber')) searchText = request.POST.get('searchText') sortName = request.POST.get('sortName') sortOrder = request.POST.get('sortOrder') total = Article.objects.all().count() articles = Article.objects.order_by('-id')[(pageNumber - 1) * pageSize:(pageNumber) * pageSize] print(articles) rows = [] data = {"total": total, "rows": rows} for article in articles: rows.append( {'id': article.id, 'title': article.title, 'content': article.content, 'create_time': article.create_time}) return HttpResponse(json.dumps(data, cls=CJsonEncoder), content_type="application/json")

vue2.0 + element-ui2实现分页

猜你喜欢