vue3+element-plus实现分页

效果：

API 接口返回数据格式

    "success": true,
    "code": 2000,
    "msg": " 成功 ",
    "data": {
        "total": 1,
        "list": [
            {
                "id": 1,
                "username": "admin",
                "state": 1,
                "roles": " 超级管理员 ",
                "created_at": "2022-06-23 13:10:37"
            }
        ]
    }
}

<template>
    <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="formJsonIn.page"
      v-model:page-size="formJsonIn.page_size"
      :page-sizes="[10, 20, 30, 40, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page="formJsonIn.page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import {accountList} from '@/request/api' // api 拿数据
import {useRouter} from 'vue-router'
const router = useRouter() // 路由跳转

const small = ref(false);
const disabled = ref(false);
const background = ref(false)

// 入参
const formJsonIn = ref({
  username: "",
  page: 1,
  page_size: 10
})

// 总条数
const total = ref(0)
const accountData = ref([])

const requestAccountList = async () => {
  let request = {
    username: formJsonIn.value.username,
    page: formJsonIn.value.page,
    page_size: formJsonIn.value.page_size
  }
  let res = await accountList(request)
  if (res) {if (res.data == []) {res.data = []
    }
    accountData.value = res.data.list
    total.value = res.data.total
    // console.log(accountData.value);
  }
}
requestAccountList()

// 选择每页多少条
const handleSizeChange = (row) => {
  formJsonIn.value.page_size = row
  formJsonIn.value.page = 1
  requestAccountList()}

// 点击页面进行跳转
const handleCurrentChange = (row) => {
  formJsonIn.value.page = row
  requestAccountList()}

const handleClick = () => {console.log('click')
}
</script>