<template>
  <div style="margin-top: 10px;">
    <el-pagination background :page-size="20" :page-sizes="[10, 20, 30, 40]" layout="prev,pager,next,jumper,total,sizes"
      v-model:current-page="datas.currentPage" :total="datas.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script setup>
let datas = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 20,
})
// 当前条改变
function handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
}
// 当前页改变
function handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
}
</script>