58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex justify-center my-2">
|
|
<el-pagination
|
|
class="flex justify-center flex-wrap"
|
|
v-model:current-page="offset"
|
|
v-model:page-size="limit"
|
|
:page-sizes="pageSizes"
|
|
size="small"
|
|
background
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="dataCount"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
|
|
const offset = ref(1);
|
|
const limit = ref(10);
|
|
const dataCount = ref(0);
|
|
const pageSizes = [10, 20, 50, 100];
|
|
|
|
const props = defineProps({
|
|
active: Object,
|
|
});
|
|
|
|
const emit = defineEmits(["search", "sizeChangeBack"]);
|
|
|
|
const handleSizeChange = (val) => {
|
|
offset.value = 1;
|
|
props.active.offset = offset.value;
|
|
emit("sizeChangeBack", val);
|
|
limit.value = val;
|
|
props.active.limit = limit.value;
|
|
emit("search");
|
|
};
|
|
|
|
const handleCurrentChange = (val) => {
|
|
offset.value = val;
|
|
props.active.offset = offset.value;
|
|
emit("search");
|
|
};
|
|
|
|
defineExpose({ offset, limit, dataCount, handleCurrentChange });
|
|
|
|
onMounted(() => {
|
|
offset.value = props.active.offset;
|
|
limit.value = props.active.limit;
|
|
dataCount.value = props.active.dataCount;
|
|
emit("search");
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|