修复 : 数据为空的时候,创建按钮不显示
This commit is contained in:
@@ -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')
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user