修复 : 数据为空的时候,创建按钮不显示

This commit is contained in:
zxr
2026-06-29 10:42:36 +08:00
parent fcaad4b3ae
commit 2107f77081
2 changed files with 89 additions and 62 deletions

View File

@@ -51,27 +51,37 @@
</a-col> </a-col>
</a-row> </a-row>
<!-- 表格 --> <!-- 表格主体状态占位与表格分离工具栏始终展示 -->
<a-table <PageState
row-key="id" :status="status"
:loading="loading" :loading-text="loadingText"
:pagination="pagination" :empty-text="emptyText"
:columns="cloneColumns" :error-text="errorText"
:data="data" :partial-text="partialText"
:bordered="bordered" @retry="emit('retry')"
:size="size"
:row-selection="rowSelection"
:scroll="scroll"
@page-change="onPageChange"
@page-size-change="onPageSizeChange"
@selection-change="onSelectionChange"
@row-click="onRowClick"
> >
<!-- 动态插槽根据 columns slotName 动态渲染 --> <a-table
<template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps"> v-if="status === 'success' || status === 'partial'"
<slot :name="col.slotName" v-bind="slotProps" /> row-key="id"
</template> :loading="loading"
</a-table> :pagination="pagination"
:columns="cloneColumns"
:data="data"
:bordered="bordered"
:size="size"
:row-selection="rowSelection"
:scroll="scroll"
@page-change="onPageChange"
@page-size-change="onPageSizeChange"
@selection-change="onSelectionChange"
@row-click="onRowClick"
>
<!-- 动态插槽根据 columns slotName 动态渲染 -->
<template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps">
<slot :name="col.slotName" v-bind="slotProps" />
</template>
</a-table>
</PageState>
</div> </div>
</template> </template>
@@ -140,6 +150,26 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
status: {
type: String as PropType<'loading' | 'empty' | 'error' | 'success' | 'partial' | 'unauthorized'>,
default: 'success',
},
loadingText: {
type: String,
default: '加载中',
},
emptyText: {
type: String,
default: '暂无数据',
},
errorText: {
type: String,
default: '数据暂时不可用,请稍后重试。',
},
partialText: {
type: String,
default: '部分数据加载失败,当前页面展示可用数据。',
},
downloadButtonText: { downloadButtonText: {
type: String, type: String,
default: '下载', default: '下载',
@@ -167,6 +197,7 @@ const emit = defineEmits<{
(e: 'download'): void (e: 'download'): void
(e: 'density-change', size: SizeProps): void (e: 'density-change', size: SizeProps): void
(e: 'column-change', columns: TableColumnData[]): void (e: 'column-change', columns: TableColumnData[]): void
(e: 'retry'): void
}>() }>()
const size = ref<SizeProps>('medium') const size = ref<SizeProps>('medium')

View File

@@ -19,54 +19,50 @@
<a-divider style="margin-top: 0" /> <a-divider style="margin-top: 0" />
<!-- 数据表格 --> <!-- 数据表格工具栏始终展示表格主体随状态切换 -->
<PageState <DataTable
:data="data"
:columns="columns"
:loading="loading"
:pagination="pagination"
:bordered="bordered"
:row-selection="rowSelection"
:scroll="responsiveScroll"
:show-toolbar="showToolbar"
:show-download="showDownload"
:show-refresh="showRefresh"
:show-density="showDensity"
:show-column-setting="showColumnSetting"
:download-button-text="downloadButtonText"
:refresh-tooltip-text="refreshTooltipText"
:density-tooltip-text="densityTooltipText"
:column-setting-tooltip-text="columnSettingTooltipText"
:status="stateStatus" :status="stateStatus"
:loading-text="loadingText"
:empty-text="emptyText" :empty-text="emptyText"
:error-text="errorText" :error-text="errorText"
:partial-text="partialText" :partial-text="partialText"
:loading-text="loadingText" @page-change="handlePageChange"
@page-size-change="handlePageSizeChange"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@refresh="handleRefresh"
@download="handleDownload"
@density-change="handleDensityChange"
@column-change="handleColumnChange"
@retry="handleRefresh" @retry="handleRefresh"
> >
<DataTable <template #toolbar-left>
v-if="stateStatus !== 'empty' && stateStatus !== 'error' && stateStatus !== 'unauthorized'" <slot name="toolbar-left" />
:data="data" </template>
:columns="columns" <template #toolbar-right>
:loading="loading" <slot name="toolbar-right" />
:pagination="pagination" </template>
:bordered="bordered" <!-- 动态插槽透传 -->
:row-selection="rowSelection" <template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps">
:scroll="responsiveScroll" <slot :name="col.slotName" v-bind="slotProps" />
:show-toolbar="showToolbar" </template>
:show-download="showDownload" </DataTable>
:show-refresh="showRefresh"
:show-density="showDensity"
:show-column-setting="showColumnSetting"
:download-button-text="downloadButtonText"
:refresh-tooltip-text="refreshTooltipText"
:density-tooltip-text="densityTooltipText"
:column-setting-tooltip-text="columnSettingTooltipText"
@page-change="handlePageChange"
@page-size-change="handlePageSizeChange"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@refresh="handleRefresh"
@download="handleDownload"
@density-change="handleDensityChange"
@column-change="handleColumnChange"
>
<template #toolbar-left>
<slot name="toolbar-left" />
</template>
<template #toolbar-right>
<slot name="toolbar-right" />
</template>
<!-- 动态插槽透传 -->
<template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps">
<slot :name="col.slotName" v-bind="slotProps" />
</template>
</DataTable>
</PageState>
</a-card> </a-card>
</div> </div>
</template> </template>