1.新建Pagination文件以及该文件夹下新建index.vue
2.在index.vue文件中编写一下代码
<template>
<div :class="{ 'hidden': hidden }" class="pagination-container">
<el-pagination
:background="background"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:pager-count="pagerCount"
:total="+total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup>
import { scrollTo } from '@/utils/scroll-to'
const props = defineProps({
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default() {
return [30, 60, 100]
}
},
// 移动端页码按钮的数量端默认值5
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
})
const emit = defineEmits();
const currentPage = computed({
get() {
return props.page
},
set(val) {
emit('update:page', val)
}
})
const pageSize = computed({
get() {
return props.limit
},
set(val){
emit('update:limit', val)
}
})
function handleSizeChange(val) {
if (currentPage.value * val > props.total) {
currentPage.value = 1
}
emit('pagination', { page: currentPage.value, limit: val })
if (props.autoScroll) {
scrollTo(0, 800)
}
}
function handleCurrentChange(val) {
emit('pagination', { page: val, limit: pageSize.value })
if (props.autoScroll) {
scrollTo(0, 800)
}
}
</script>
<style scoped>
.demo-pagination-block {
position: fixed;
bottom: 20px;
right: 20px;
width: 50vw;
padding-bottom: 20px;
background: #fff;
z-index: 99;
.pagination-container {
margin-top: 0;
}
}
.pagination-container {
background: #fff;
padding: 0 16px 20px;
}
.pagination-container.hidden {
display: none;
}
</style>3.使用封装的组件
<div class="demo-pagination-block">
<pagination :total="data.total" v-model:page="searchParams.pageNum" v-model:limit="searchParams.pageSize"
@pagination="getList" />
</div>
import { pageList } from '@/api/dataScheduling/portDataList'
const searchParams = reactive({
containerNo: '', // 集装箱号
searchDate: '', // 筛选时间
dataStatus: '', // 状态
shipName: '', // 船名
destinationPort: '', // 目的港
pageNum: 1, // 页码
pageSize: 30, // 条数
});
const data = reactive({
total: 10, // 总条数
tableData: [], // 数据列表
});
onMounted(() => {
getList();
});
// 获取数据列表
const getList = () => {
let params = { ...searchParams }
pageList(params).then(res => {
console.log('获取列表', res);
data.tableData = res.rows
data.total = res.total
})
};
