41 lines
1012 B
Vue
41 lines
1012 B
Vue
|
<template>
|
||
|
|
<el-pagination
|
||
|
|
size="small"
|
||
|
|
:current-page="pagination.currentPage || 1"
|
||
|
|
:page-size="pagination.pageSize || 10"
|
||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
||
|
|
:total="pagination.total || 0"
|
||
|
|
@update:current-page="handleCurrentChange"
|
||
|
|
@update:page-size="handleSizeChange"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ElPagination } from "element-plus";
|
||
|
|
import "element-plus/es/components/pagination/style/css";
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: "AppPagination",
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["get-data"]);
|
||
|
|
const pagination = defineModel("pagination", { type: Object, required: true });
|
||
|
|
const handleCurrentChange = (val) => {
|
||
|
|
pagination.value = {
|
||
|
|
currentPage: val,
|
||
|
|
pageSize: pagination.value.pageSize,
|
||
|
|
total: pagination.value.total,
|
||
|
|
};
|
||
|
|
emits("get-data");
|
||
|
|
};
|
||
|
|
const handleSizeChange = (val) => {
|
||
|
|
pagination.value = {
|
||
|
|
currentPage: 1,
|
||
|
|
pageSize: val,
|
||
|
|
total: pagination.value.total,
|
||
|
|
};
|
||
|
|
emits("get-data");
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|