|
@@ -1,21 +1,11 @@
|
|
<template>
|
|
<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 :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>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
-import { toRefs, defineComponent,computed } from 'vue';
|
|
|
|
|
|
+import { toRefs, defineComponent, computed } from 'vue';
|
|
const props = {
|
|
const props = {
|
|
total: {
|
|
total: {
|
|
required: true,
|
|
required: true,
|
|
@@ -32,7 +22,7 @@ const props = {
|
|
pageSizes: {
|
|
pageSizes: {
|
|
type: Array,
|
|
type: Array,
|
|
default() {
|
|
default() {
|
|
- return [10, 20, 30, 50]
|
|
|
|
|
|
+ return [10, 20, 30, 50, 100, 200, 300, 500]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 移动端页码按钮的数量端默认值5
|
|
// 移动端页码按钮的数量端默认值5
|
|
@@ -56,8 +46,8 @@ const props = {
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'pagination',
|
|
name: 'pagination',
|
|
props: props,
|
|
props: props,
|
|
- setup(props,{emit}){
|
|
|
|
- const { page,limit,pageSizes } = toRefs(props);
|
|
|
|
|
|
+ setup(props, { emit }) {
|
|
|
|
+ const { page, limit, pageSizes } = toRefs(props);
|
|
const currentPage = computed({
|
|
const currentPage = computed({
|
|
get() {
|
|
get() {
|
|
return page.value;
|
|
return page.value;
|
|
@@ -78,7 +68,7 @@ export default defineComponent({
|
|
currentPage.value = 1
|
|
currentPage.value = 1
|
|
emit('pagination', { page: currentPage.value, limit: val })
|
|
emit('pagination', { page: currentPage.value, limit: val })
|
|
};
|
|
};
|
|
- const handleCurrentChange=(val:number) => {
|
|
|
|
|
|
+ const handleCurrentChange = (val: number) => {
|
|
emit('pagination', { page: val, limit: pageSizes.value })
|
|
emit('pagination', { page: val, limit: pageSizes.value })
|
|
}
|
|
}
|
|
return {
|
|
return {
|
|
@@ -96,6 +86,7 @@ export default defineComponent({
|
|
background: #fff;
|
|
background: #fff;
|
|
padding: 32px 16px;
|
|
padding: 32px 16px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.pagination-container.hidden {
|
|
.pagination-container.hidden {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|