需求要求返回指定的code得时候显示不同的table空状态提示
首先要引入空状态组件
import { Empty } from 'antd';
定义默认空状态
const [empty, setEmpty] = useState({
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />,
});
在请求表格数据的函数中判断不同的code
getTableList(params)
.then((res) => {
setEmpty({ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> });
if (res.code * 1 === 0) {}
})
.catch((res) => {
if (res.code * 1 === 8888) {
setDataSource([]);
setEmpty({
emptyText: (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={'超出时间查询范围'}
/>
),
});
}
});
注意要清空上一次返回的data,将dataSource设置为空数组,不然表格只会显示上一次返回的数据,而不是空状态
最后在Table标签中加入locale
<Table
pagination={{
...pagination,
}}
rowKey="id"
columns={tableColumns}
dataSource={dataSource}
locale={empty}
/>
图片和提示语都是可以换的,还可以自定义,antd的官方文档都有例子,
locale 默认文案设置,目前包括排序、过滤、空数据文案
empty也可以自定义空数据的样式
import imageSrc from "./images/empty.png";
<Empty image={imageSrc}
// imageStyle 为引入图片的样式设置,可根据需要自行设置
imageStyle={{
height: 100,
width: 100,
}} />
}