49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const emit = defineEmits(['getList'])
|
||
|
|
// 每页数量值改变
|
||
|
|
const handleSizeChange = (val: Number) => {
|
||
|
|
// 传递每页数量
|
||
|
|
emit('getList', val)
|
||
|
|
}
|
||
|
|
// 页码值改变
|
||
|
|
const handleCurrentChange = (val: Number) => {
|
||
|
|
// 传递页码值
|
||
|
|
emit('getList', val)
|
||
|
|
}
|
||
|
|
|
||
|
|
defineProps<Props>()
|
||
|
|
interface Props {
|
||
|
|
pageSize?: 20
|
||
|
|
pageNumber?: 1
|
||
|
|
total?: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
// const handleTotalText = () => {
|
||
|
|
// const targetDom: any = document.querySelector('.el-pagination__total')
|
||
|
|
// targetDom.innerText = `数量${total.value}`
|
||
|
|
// }
|
||
|
|
// onMounted(() => {
|
||
|
|
// // handleTotalText()
|
||
|
|
// })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<!-- 分页 -->
|
||
|
|
<el-pagination
|
||
|
|
:current-page="pageNumber"
|
||
|
|
:page-size="pageSize"
|
||
|
|
:page-sizes="[10, 20, 30, 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>
|