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实现分页

最新文章

热门文章