element plus 表格为空时 显示图片 且上下左右居中

可以使用 Element Plus 的自定义插槽来实现表格为空时显示图片，并使用 CSS 来实现上下左右居中。具体实现步骤如下：

1. 在表格中添加一个自定义插槽，用于显示图片：

<template #empty>
  <div class="empty-container">
    <img src="your-image-url" alt="empty">
  </div>
</template>

2. 在 CSS 中设置 `.empty-container` 的样式，使其居中显示：

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

这样，当表格数据为空时，就会显示对应的图片，并且图片会在表格中上下左右居中显示。

相关问题

element plus 表格为空时显示图片 el-table__empty-text 上下左右居中

要让 element plus 表格在为空时显示图片，并且让该图片在表格中上下左右居中，可以通过以下步骤实现：

1. 在 el-table 组件中设置 empty-text 属性，将其值设为一个空字符串，即 el-table__empty-text 不会显示。

<el-table :data="tableData" :empty-text="">
  ...
</el-table>

2. 在 el-table 组件中添加一个 slot，用于在表格为空时显示图片。

<el-table :data="tableData" :empty-text="">
  <template #empty>
    <div class="empty-container">
      <img src="empty.jpg" alt="empty">
    </div>
  </template>
  ...
</el-table>

3. 在样式表中为该 slot 中的图片容器添加样式，使其在表格中上下左右居中。

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

这样，当表格数据为空时，就会显示一张图片，并且该图片会在表格中上下左右居中。

Element表格数据为空时自定义显示内容

如果Element表格数据为空时需要自定义显示内容，可以在表格组件中添加一个`slot`插槽，例如：

<el-table :data="tableData">
  <template slot="empty">
    <div class="no-data">
      <span>暂无数据</span>
    </div>
  </template>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

在上面的例子中，我们在表格组件中添加了一个名为`empty`的插槽，并在插槽中定义了一个自定义的内容。当表格数据为空时，就会显示这个自定义的内容。

需要注意的是，我们在自定义的内容中可以添加任意的HTML代码和样式，以满足不同的需求。