django+elementui实现分页

分页样式自己选，主要是对两个事件的处理

前端

<template>
  <div>
    <div align="right" style="margin: 10px 20px">
      <el-button type="primary" plain @click="addgoods">添加商品</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="商品id">
        <template slot-scope="scope">
          {{ scope.row.pk }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.fields.goods_name }}
        </template>
      </el-table-column>
      <el-table-column label="商品价格">
        <template slot-scope="scope">
          {{ scope.row.fields.goods_price }}
        </template>
      </el-table-column>
      <el-table-column label="实际价格">
        <template slot-scope="scope">
          {{ scope.row.fields.goods_tprice }}
        </template>
      </el-table-column>
      <el-table-column label="商品卖点">
        <template slot-scope="scope">
          {{ scope.row.fields.goods_sell }}
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="editData(row.pk)">
            Edit
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="delData(row.pk)">
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[ 10,20, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: null,
      param: {
        'currentPage': 1, // 当前页
        'pagesize': 10 // 默认每页多少张

      },
      total: 0// 共多少页
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    // fetchData() {
    //   const vm = this
    //   this.$http.get('http://127.0.0.1:8000/api/goodlist/').then(
    //     (res) => {
    //       if (res.data.code == 0) {
    //         console.log(res.data.code)
    //         vm.tableData = res.data.data
    //       }
    //     }
    //   )
    //     .catch(function(error) {
    //       vm.$message.error('错了哦，这是一条错误消息')
    //       console.log(error)
    //     })
    // },
    getList() {
      const vm = this
      this.$http.post('http://127.0.0.1:8000/api/test/', vm.param).then(
        (res) => {
          if (res.data.code == 0) {
            console.log(res.data.code)
            vm.total = res.data.total
            vm.tableData = res.data.data
          }
        }
      )
        .catch(function(error) {
          vm.$message.error('错了哦，这是一条错误消息')
          console.log(error)
        })
    },
    handleSizeChange: function(size) {
      const a = this
      a.param.pagesize = size
      this.getList()
      console.log(a.param.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      const b = this
      b.param.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
      this.getList()
    },
    editData(pid) {
      this.$router.push('/form/index/' + pid)
    },
    delData(id) {
      console.log(id)
      this.$http.get('http://127.0.0.1:8000/api/delgood?id=' + id).then((res) => {
        console.log(res.data)
        this.fetchData()
        this.$router.push('/goods/table/')
        this.$notify({
          title: '成功',
          message: '恭喜你删除成功',
          type: 'success',
          duration: 1000
        })
      })
        .catch(function(error) {
          this.$message.error('错了哦，这是一条错误消息')
          console.log(error)
        })
    },
    addgoods() {
      this.$router.push('/form/add/')
    }

  }
}
</script>

后端

class test(View):
    def post(self, request):
        res = {'code': 0, 'msg': '添加成功', 'data': []}
        param = request.POST
        pageSize = int(param['pagesize'])
        pageNumber = int(param['currentPage'])
        print(pageNumber)
        total = GoodsInfo.objects.all().count()
        print(total)
        res['total'] = total
        good = GoodsInfo.objects.order_by('id')[(pageNumber - 1) * pageSize:(pageNumber) * pageSize]
        good = json.loads(serializers.serialize('json', good))
        res['data'] = good
        print(res)
        return http.JsonResponse(res)