Vue + element分页

<template>
  <el-container>
    <el-main>
      <div>
        <el-pagination
          :current-page="queryParams.current"
          :page-sizes="[10,20,30,50]"
          :page-size="queryParams.limit"
          :total="queryParams.total"
          layout="total, sizes, prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { Queryproject } from '@/api/project'
export default {
  data() {
    return {
      queryParams: {
        current: 1,
        limit: 20,
        total: 0,
      },
      tableList: []
    }
  },
  created() {
    this.queryitem()
  },
  methods: {
    handleCurrentChange(current) {
      this.queryParams.current = current
      this.queryitem()
    },
    handleSizeChange(size) {
      this.queryParams.limit = size
      this.queryitem()
    },
    queryitem() {
      Queryproject(this.queryParams).then(response => {
        if (response.data.success) {
          this.queryParams.total = Number(JSON.parse(response.data.data).TotalSize)
          if (JSON.parse(response.data.data).RowCnt) {
            this.tableList = JSON.parse(response.data.data).Records
            console.log(this.tableList)
          }
        }
      })
    }
  }
}
</script>
<style scoped>
</style>