feat: 增加加载状态管理,优化数据加载体验
This commit is contained in:
@@ -15,6 +15,7 @@ import type { TableColumnCheck } from '~/packages/hooks/src';
|
|||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
const title = t(route.meta.i18nKey as string);
|
const title = t(route.meta.i18nKey as string);
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
@@ -44,15 +45,22 @@ const pagination = ref<PaginationProps>({
|
|||||||
});
|
});
|
||||||
|
|
||||||
async function loadData(query?: Record<string, any>) {
|
async function loadData(query?: Record<string, any>) {
|
||||||
|
loading.value = true;
|
||||||
const page = pagination.value.page || 1;
|
const page = pagination.value.page || 1;
|
||||||
const pageSize = pagination.value.pageSize || 10;
|
const pageSize = pagination.value.pageSize || 10;
|
||||||
const { data } = await props.fetchData({
|
const { data } = await props
|
||||||
pagination: {
|
.fetchData({
|
||||||
pageIndex: page,
|
pagination: {
|
||||||
pageSize
|
pageIndex: page,
|
||||||
},
|
pageSize
|
||||||
filter: query
|
},
|
||||||
});
|
filter: query
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
tableData.value = (data.value as any).data;
|
tableData.value = (data.value as any).data;
|
||||||
pagination.value.itemCount = (data.value as any).pagination.total;
|
pagination.value.itemCount = (data.value as any).pagination.total;
|
||||||
@@ -109,6 +117,7 @@ defineExpose({
|
|||||||
|
|
||||||
<NDataTable
|
<NDataTable
|
||||||
:row-key="row => (row as any).id"
|
:row-key="row => (row as any).id"
|
||||||
|
:loading="loading"
|
||||||
:scroll-x="2000"
|
:scroll-x="2000"
|
||||||
:columns="dataTableColumns"
|
:columns="dataTableColumns"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
|
|||||||
Reference in New Issue
Block a user