💄 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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user