重构:在 config 列表,完整引入分页

This commit is contained in:
YunaiV 2023-03-11 00:11:48 +08:00
parent 0506c4e54d
commit 74d225cce4
2 changed files with 27 additions and 59 deletions

View File

@ -1,64 +1,43 @@
<!-- 基于 ruoyi-vue3 Pagination 重构核心是简化无用的属性并使用 ts 重写 -->
<template>
<div :class="{ 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>
<el-pagination
v-show="total > 0"
class="float-right mt-15px mb-15px"
:background="true"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[10, 20, 30, 50]"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:pager-count="pagerCount"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<script setup>
// TODO ts
// TODO scrollTo
// import { scrollTo } from '@/utils/scroll-to'
import { computed } from 'vue'
const props = defineProps({
//
total: {
required: true,
type: Number
},
// pageNo
page: {
type: Number,
default: 1
},
// pageSize
limit: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
},
//
// 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
}
})
@ -68,6 +47,7 @@ const currentPage = computed({
return props.page
},
set(val) {
// update:page limit pageNo
emit('update:page', val)
}
})
@ -76,32 +56,20 @@ const pageSize = computed({
return props.limit
},
set(val) {
// update:limit limit pageSize
emit('update:limit', val)
}
})
function handleSizeChange(val) {
const handleSizeChange = (val) => {
// 1
if (currentPage.value * val > props.total) {
currentPage.value = 1
}
// pagination
emit('pagination', { page: currentPage.value, limit: val })
if (props.autoScroll) {
// scrollTo(0, 800)
}
}
function handleCurrentChange(val) {
const handleCurrentChange = (val) => {
// pagination
emit('pagination', { page: val, limit: pageSize.value })
if (props.autoScroll) {
// scrollTo(0, 800)
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>

View File

@ -36,7 +36,7 @@
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
/>
</el-form-item>
<el-form-item>
@ -103,8 +103,8 @@
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"