设置表格空图片

场景描述

当表格无数据时，antd默认显示为下图

希望改为自定义的图片和文字内容，如下图所示

实现思路

通过设置css实现，隐藏原来的图片和文字，通过设置背景图显示新的图片，通过增加after伪类显示新的文字内容。

实现步骤

1. 上传图片

点击页面编辑区右上角的设置图标，显示下拉菜单，点击素材库菜单，打开素材库对话框，上传图片至UI2/pcx/images目录下。

本例中上传empty.svg文件.

1. 在css文件中，增加下面的css，实现自定义空图片和文字的效果

   :global{
    .ant-empty.ant-empty-normal .ant-empty-image {
        background-image: url(./images/empty.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 276px 128px;
        margin-bottom: 16px;
        height: 128px;
    }
   
    .ant-empty.ant-empty-normal .ant-empty-description,
    .ant-empty.ant-empty-normal .ant-empty-image svg{
        display: none
    }
   
    .ant-empty.ant-empty-normal:after {
        content: "暂无内容";
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
    }
   }
   

2. 不同的表格显示不同的空图片

上面的写法是全局生效的，要实现不同的表格显示不同的空图片，使用下面的方式定义css

.task-table{
    :global{
        ...
    }
}
.notice-table{
    :global{
        ...
    }
}

在表格外层增加区块组件，设置自定义样式为task-table，使用task-table里面的样式，定义为notice-table，使用notice-table里面的样式。