feat: custom table page size setting

This commit is contained in:
pa
2025-12-18 00:28:02 +09:00
committed by Natsumi
parent a3b71007d7
commit 277275f5ef
15 changed files with 132 additions and 86 deletions

View File

@@ -17,7 +17,7 @@
<el-pagination
size="small"
:current-page="internalCurrentPage"
:page-size="internalPageSize"
:page-size="effectivePageSize"
:total="filteredData.length"
v-bind="mergedPaginationProps"
@size-change="handleSizeChange"
@@ -104,10 +104,14 @@
const mergedPaginationProps = computed(() => ({
layout: 'sizes, prev, pager, next, total',
pageSizes: [10, 15, 20, 25, 50, 100],
...paginationProps.value
...paginationProps.value,
pageSizes: paginationProps.value?.pageSizes ?? appearanceSettingsStore.tablePageSizes
}));
const effectivePageSize = computed(() => {
return props.pageSizeLinked ? appearanceSettingsStore.tablePageSize : internalPageSize.value;
});
const applyFilter = function (row, filter) {
if (Array.isArray(filter.prop)) {
return filter.prop.some((propItem) => applyFilter(row, { prop: propItem, value: filter.value }));
@@ -175,8 +179,8 @@
return filteredData.value;
}
const start = (internalCurrentPage.value - 1) * internalPageSize.value;
const end = start + internalPageSize.value;
const start = (internalCurrentPage.value - 1) * effectivePageSize.value;
const end = start + effectivePageSize.value;
return filteredData.value.slice(start, end);
});
@@ -202,6 +206,7 @@
const handleSizeChange = (size) => {
if (props.pageSizeLinked) {
appearanceSettingsStore.setTablePageSize(size);
return;
}
internalPageSize.value = size;
};
@@ -234,6 +239,7 @@
return {
internalCurrentPage,
internalPageSize,
effectivePageSize,
showPagination,
mergedTableProps,
mergedPaginationProps,

View File

@@ -31,8 +31,8 @@
:disabled="
Boolean(
isGroupMembersLoading ||
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
)
">
<el-button size="small" @click.stop>
@@ -60,8 +60,8 @@
:disabled="
Boolean(
isGroupMembersLoading ||
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
)
">
<el-button size="small" @click.stop>
@@ -398,10 +398,7 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
)
"
@click="groupMembersDeleteSentInvite"
@@ -483,10 +480,7 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
)
"
@click="groupMembersAcceptInviteRequest"
@@ -496,10 +490,7 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
)
"
@click="groupMembersRejectInviteRequest"
@@ -509,10 +500,7 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
)
"
@click="groupMembersBlockJoinRequest"
@@ -594,10 +582,7 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
)
"
@click="groupMembersDeleteBlockedRequest"
@@ -800,8 +785,8 @@
:disabled="
Boolean(
!selectedRoles.length ||
progressCurrent ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
progressCurrent ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
)
"
@click="groupMembersAddRoles"
@@ -811,8 +796,8 @@
:disabled="
Boolean(
!selectedRoles.length ||
progressCurrent ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
progressCurrent ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
)
"
@click="groupMembersRemoveRoles"
@@ -947,8 +932,7 @@
tableProps: { stripe: true, size: 'small' },
pageSize: 15,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 15, 20, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});
const groupJoinRequestsModerationTable = reactive({
@@ -956,8 +940,7 @@
tableProps: { stripe: true, size: 'small' },
pageSize: 15,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 15, 20, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});
const groupBlockedModerationTable = reactive({
@@ -966,8 +949,7 @@
pageSize: 15,
paginationProps: {
small: true,
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 15, 20, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});
const groupLogsModerationTable = reactive({
@@ -976,8 +958,7 @@
tableProps: { stripe: true, size: 'small' },
pageSize: 15,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 15, 20, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});
const groupBansModerationTable = reactive({
@@ -986,8 +967,7 @@
tableProps: { stripe: true, size: 'small' },
pageSize: 15,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 15, 20, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});
const groupMemberModerationTable = reactive({
@@ -995,8 +975,7 @@
tableProps: { stripe: true, size: 'small' },
pageSize: 15,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 15, 20, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});

View File

@@ -94,7 +94,7 @@
defaultSort: { prop: 'created_at', order: 'descending' }
},
pageSize: 10,
paginationProps: { layout: 'sizes,prev,pager,next,total', pageSizes: [10, 25, 50, 100] }
paginationProps: { layout: 'sizes,prev,pager,next,total' }
});
const props = defineProps({

View File

@@ -118,8 +118,7 @@
},
pageSize: 10,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});
const fullscreen = ref(false);

View File

@@ -110,8 +110,7 @@
},
pageSize: 10,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});
const loading = ref(false);

View File

@@ -119,8 +119,7 @@
},
pageSize: 10,
paginationProps: {
layout: 'sizes,prev,pager,next,total',
pageSizes: [10, 25, 50, 100]
layout: 'sizes,prev,pager,next,total'
}
});