设置表格空图片

场景描述

当表格无数据时，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);
        }
    }

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

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

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

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