react antd table组件无数据时,用locale属性自定义缺省图

一、问题描述:因产品需要,不用组件自带的缺省图,效果如下:

组件默认图:修改之后:

二、修改步骤:

table无数据修改:

1、引入 Empty组件

import { Empty, Button, ConfigProvider,  Table, Drawer, Radio, Popover } from "antd";

2、引入nodata, nodata为需要引入的图片

import nodata from "../../../assets/img/empty.png";

3、table 加 locale属性

4、给locale属性(empty)附值

const empty = {

emptyText:<Empty image={nodata}

// imageStyle 为引入图片的样式设置,可根据需要自行设置

imageStyle={{

height: 86,

width: 100,

marginLeft: 'calc(50% - 50px)',

marginTop:'50px',

marginBottom: '16px'

}} />

}

*local属性相关说明(见ant-design):ant-design/zh_CN.tsx at 6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4 · ant-design/ant-design · GitHub