element-ui 中如何封装表单no-data情况自定义页面

需求：
统一封装项目表单no-data情况显示，例如做成这种效果

思路：

1.利用elementUI 表单table组件自带的插槽属性，

2.在全局公共CSS文件里 通过class 类名，加一个背景图片，全局覆盖

common.scss文件里

.tableEmpty {
  width: 320px;
  height: 466px;
  background-size: 100% 100%;
  background-image: url(./assets/noData.png);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block
}

然后项目所有页面的表单，no-data情况这么调用

在el-table 里面前面加下 slot="empty" 插槽，然后里面写上自己定义的css 类名，就能实现了