react+antd Table 根据code显示不同的空状态样式

需求要求返回指定的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,
  }} />

}