|
@@ -7,10 +7,12 @@
|
|
|
<div class="pagination-container">
|
|
<div class="pagination-container">
|
|
|
<el-pagination
|
|
<el-pagination
|
|
|
background
|
|
background
|
|
|
- layout="prev, pager, next, total"
|
|
|
|
|
|
|
+ layout="sizes, prev, pager, next, total"
|
|
|
:total="total"
|
|
:total="total"
|
|
|
:page-size="pageSize"
|
|
:page-size="pageSize"
|
|
|
|
|
+ :page-sizes="pageSizes"
|
|
|
:current-page="currentPage"
|
|
:current-page="currentPage"
|
|
|
|
|
+ @size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
@current-change="handleCurrentChange"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
@@ -30,15 +32,24 @@ defineProps({
|
|
|
currentPage: {
|
|
currentPage: {
|
|
|
type: Number,
|
|
type: Number,
|
|
|
default: 1
|
|
default: 1
|
|
|
|
|
+ },
|
|
|
|
|
+ pageSizes: {
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default: () => [10, 20, 50]
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-const emit = defineEmits(['update:currentPage', 'pageChange'])
|
|
|
|
|
|
|
+const emit = defineEmits(['update:currentPage', 'pageChange','update:pageSize'])
|
|
|
|
|
|
|
|
const handleCurrentChange = (page) => {
|
|
const handleCurrentChange = (page) => {
|
|
|
emit('update:currentPage', page)
|
|
emit('update:currentPage', page)
|
|
|
emit('pageChange', page)
|
|
emit('pageChange', page)
|
|
|
-}
|
|
|
|
|
|
|
+};
|
|
|
|
|
+const handleSizeChange = (size) => {
|
|
|
|
|
+ console.log('Size changed to:', size);
|
|
|
|
|
+ emit('update:pageSize', size)
|
|
|
|
|
+ emit('pageChange', 1, size) // Reset to first page on size change
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|