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")