Django Vue Elment-ui 自定义分页

 

 数据打印格式：

 

VUE部分：

    <div style="height:80vw;">
        <el-table :data="resultTable.slice((queryInfo.pagenum-1)*queryInfo.pagesize,queryInfo.pagenum*queryInfo.pagesize)" border ref="multipleTable" tooltip-effect="light" size="mini">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column v-for="(key,index) in Object.keys(resultTable[0])" :key="Math.random(index)" :label="key" :prop="key" align="center" show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <br /><br />
        <el-pagination
          :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 3, 4,5]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination><br /><br />
    </div>

  data() {
    return{
      user_actions_name: this.$route.query.user_actions_name,
      resultTable:[],
      queryInfo: {
        query: "", // 查询参数
        pagenum: 1, // 当前页码
        page: 10,
        pagesize: 20, // 每页显示条数
        },
        total: 10,
    }
  },

    pageRequest (query) {
      query['user_actions_name'] = this.user_actions_name
      query['data_point_app_id'] = localStorage.getItem("data_point_app_id")
      // return GetList(query) //标准列表输出
    ////////////最新=============
      Promise.all([
            request({
              url: urlPrefix,
              method: 'get',
              params: query
            })
        ]).then((res)=>{
          　console.log("--------------------123466777777777---------------")
            console.log(res)
            console.log(res[0])
            this.resultTable = res[0].data
            // this.total = int(res[0].total_count / this.queryInfo.pagesize)
            this.total = Math.ceil(res[0].total_count / this.queryInfo.pagesize)
        });
    ////////////=============
    }, // 数据请求
        // 分页
        // 每页显示的条数
        // 监听 page size 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.pageRequest();
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.pageRequest();
    },

Django部分：

                # ======================
                total_count = len(new_custom_item)
                page_cursor = LargeResultsSetPagination()
                data_list = page_cursor.paginate_queryset(new_custom_item, request, view=self)
                result = {'code':2000, 'data': data_list, 'total_count': total_count }
                print('--------返回的事件数据分页格式')
                print(result)
                # ======================
                return Response(result)

from rest_framework.pagination import PageNumberPagination

class LargeResultsSetPagination(PageNumberPagination):
    page_size = 1000
    page_size_query_param = 'page_size'  # 指定控制每页数量的参数
    max_page_size = 10000  # 指定每页最大返回的数量