设置表格空图片

场景描述

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

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

实现思路

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

实现步骤

1. 上传图片

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

本例中上传empty.svg文件.

1. 在css文件中，增加下面的css

   .custom{
    :deep{
            .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);
            }
        }
    ｝
   ｝
   

   在页面组件的预定义样式上添加custom，实现自定义空图片和文字的效果

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

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

.task-table{
    :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;
    }

    :global(.ant-empty.ant-empty-normal .ant-empty-description,
    .ant-empty.ant-empty-normal .ant-empty-image svg){
            display: none
        }

    :global(.ant-empty.ant-empty-normal:after) {
            content: "暂无内容";
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
    }
}
.notice-table{
    :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;
    }

    :global(.ant-empty.ant-empty-normal .ant-empty-description,
    .ant-empty.ant-empty-normal .ant-empty-image svg){
            display: none
        }

    :global(.ant-empty.ant-empty-normal:after) {
            content: "暂无内容";
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
    }
}

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