80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
// 每页数量值改变
|
|
const handleSizeChange = (val: Number) => {
|
|
emit('update:pageSize', val)
|
|
// 传递每页数量
|
|
emit('getListChange')
|
|
}
|
|
// 页码值改变
|
|
const handleCurrentChange = (val: Number) => {
|
|
emit('update:pageNum', val)
|
|
// 传递页码值
|
|
emit('getListChange')
|
|
}
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
page?: number
|
|
size?: number
|
|
total?: number
|
|
}>(),
|
|
{
|
|
page: 1,
|
|
size: 10,
|
|
total: 0
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits(['getListChange', 'update:pageSize', 'update:pageNum'])
|
|
|
|
const currentPage = computed({
|
|
get: () => {
|
|
return props.page
|
|
},
|
|
set: (val: number) => {
|
|
emit('update:pageNum', val)
|
|
}
|
|
})
|
|
const pageSize = computed({
|
|
get: () => {
|
|
return props.size
|
|
},
|
|
set: (val: number) => {
|
|
emit('update:pageSize', val)
|
|
}
|
|
})
|
|
|
|
// const paginationData = reactive({
|
|
// pageSize: Props.pageSize,
|
|
// pageNumber: Props.pageNumber
|
|
// })
|
|
|
|
// const handleTotalText = () => {
|
|
// const targetDom: any = document.querySelector('.el-pagination__total')
|
|
// targetDom.innerText = `数量${total.value}`
|
|
// }
|
|
// onMounted(() => {
|
|
// // handleTotalText()
|
|
// })
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="pageSize"
|
|
:page-sizes="[5, 10, 20, 40]"
|
|
small="small"
|
|
background="background"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange" />
|
|
</template>
|
|
|
|
<style>
|
|
.el-pagination {
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|