重构:在 config 列表,完整引入分页
This commit is contained in:
parent
0506c4e54d
commit
74d225cce4
@ -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>
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user