Table 组件:1)增加 tableMethods 属性,提升代码的可阅读性;2)Table 和 Pagination 组件的逻辑统一

This commit is contained in:
YunaiV 2023-03-17 22:32:25 +08:00
parent 714dd661c4
commit 96e0ce9866
3 changed files with 8 additions and 4 deletions

View File

@ -5,7 +5,7 @@
class="float-right mt-15px mb-15px" class="float-right mt-15px mb-15px"
:background="true" :background="true"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[10, 20, 30, 50]" :page-sizes="[10, 20, 30, 50, 100]"
v-model:current-page="currentPage" v-model:current-page="currentPage"
v-model:page-size="pageSize" v-model:page-size="pageSize"
:pager-count="pagerCount" :pager-count="pagerCount"

View File

@ -104,11 +104,12 @@ export default defineComponent({
}) })
const pagination = computed(() => { const pagination = computed(() => {
// update by Pagination
return Object.assign( return Object.assign(
{ {
small: false, small: false,
background: true, background: true,
pagerCount: 5, pagerCount: document.body.clientWidth < 992 ? 5 : 7,
layout: 'total, sizes, prev, pager, next, jumper', layout: 'total, sizes, prev, pager, next, jumper',
pageSizes: [10, 20, 30, 50, 100], pageSizes: [10, 20, 30, 50, 100],
disabled: false, disabled: false,
@ -283,10 +284,11 @@ export default defineComponent({
}} }}
</ElTable> </ElTable>
{unref(getProps).pagination ? ( {unref(getProps).pagination ? (
// update by Pagination
<ElPagination <ElPagination
v-model:pageSize={pageSizeRef.value} v-model:pageSize={pageSizeRef.value}
v-model:currentPage={currentPageRef.value} v-model:currentPage={currentPageRef.value}
class="mt-10px" class="float-right mt-15px mb-15px"
{...unref(pagination)} {...unref(pagination)}
></ElPagination> ></ElPagination>
) : undefined} ) : undefined}

View File

@ -218,6 +218,8 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
register, register,
elTableRef, elTableRef,
tableObject, tableObject,
methods methods,
// add by 芋艿:返回 tableMethods 属性,和 tableObject 更统一
tableMethods: methods
} }
} }