💄 refactor(CardTable): proper empty-state handling & pagination visibility on mobile

• Imported Semi-UI `Empty` component.
• Detect when `dataSource` is empty on mobile card view:
  – Renders supplied `empty` placeholder (`tableProps.empty`) or a default `<Empty description="No Data" />`.
  – Suppresses the mobile `Pagination` component to avoid blank pages.
• Pagination now renders only when `dataSource.length > 0`, preserving UX parity with desktop tables.
This commit is contained in:
t0ng7u
2025-07-19 02:35:01 +08:00
parent 301909e3e5
commit 3b3ae9c0dd

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
import { Table, Card, Skeleton, Pagination } from '@douyinfe/semi-ui';
import { Table, Card, Skeleton, Pagination, Empty } from '@douyinfe/semi-ui';
import PropTypes from 'prop-types';
import { useIsMobile } from '../../../hooks/common/useIsMobile';
@@ -97,6 +97,18 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
}
// 渲染移动端卡片
const isEmpty = !showSkeleton && (!dataSource || dataSource.length === 0);
if (isEmpty) {
// 若传入 empty 属性则使用之,否则使用默认 Empty
if (tableProps.empty) return tableProps.empty;
return (
<div className="flex justify-center p-4">
<Empty description="No Data" />
</div>
);
}
return (
<div className="flex flex-col gap-2">
{dataSource.map((record, index) => {
@@ -145,7 +157,7 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
);
})}
{/* 分页组件 */}
{tableProps.pagination && (
{tableProps.pagination && dataSource.length > 0 && (
<div className="mt-2 flex justify-center">
<Pagination {...tableProps.pagination} />
</div>