You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.6 KiB
77 lines
1.6 KiB
<template>
|
|
<el-pagination
|
|
:currentPage="state.currentPage"
|
|
:page-size="state.pageSize"
|
|
:total="props.pager.total"
|
|
:background="props.pageBackGround"
|
|
:layout="props.pageLayout"
|
|
:hide-on-single-page="props.isHideOnlyOne"
|
|
:page-sizes="props.pageSizeList"
|
|
@size-change="pageSizeChange"
|
|
@current-change="pageCurrentChange"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineOptions({ name: 'elPager' })
|
|
import { reactive, ref, onMounted,watch } from 'vue'
|
|
import { ElMessageBox, ElMessage,ElPagination } from 'element-plus'
|
|
|
|
const state = reactive({
|
|
currentPage:1,
|
|
pageSize:null
|
|
})
|
|
|
|
const props = defineProps({
|
|
// table分页
|
|
pager: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
// 分页显示内容
|
|
pageLayout: {
|
|
type: String,
|
|
default: 'total, sizes,prev, pager, next'
|
|
},
|
|
// 只有一页是否隐藏
|
|
isHideOnlyOne:{
|
|
type:Boolean,
|
|
default: false
|
|
},
|
|
// 是否有底色
|
|
pageBackGround:{
|
|
type:Boolean,
|
|
default: true
|
|
},
|
|
// 页数下拉
|
|
pageSizeList:{
|
|
type: Object,
|
|
default: [10, 20, 50, 100]
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
|
|
|
|
watch(props.pager, (val) => {
|
|
state.currentPage = val.page
|
|
state.pageSize = val.pageSize
|
|
})
|
|
|
|
// size-change
|
|
function pageSizeChange(pageSize){
|
|
state.pageSize = pageSize
|
|
emits('pageSizeChange',pageSize)
|
|
}
|
|
|
|
// current-change
|
|
function pageCurrentChange(page){
|
|
state.currentPage = page
|
|
emits('pageCurrentChange',page)
|
|
}
|
|
|
|
onMounted(() => {})
|
|
|
|
</script>
|
|
|
|
<style></style>
|
|
|