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 plus 表格为空时 显示图片 且上下左右居中

您可以通过以下步骤实现 element plus 表格为空时显示图片且上下左右居中的效果：

1. 在 template 中添加一个 div 包裹 el-table，并设置其样式为 position: relative。

2. 新增一个 img 标签，并设置其样式为 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。

3. 给 img 标签添加 v-if 指令，当表格为空时显示该图片。可以通过计算表格数据数组的长度来判断表格是否为空。

4. 在 el-table 中添加一个 slot="empty" 的插槽，并将 img 标签放入该插槽中。

以下是示例代码：

<template>
  <div class="table-wrapper">
    <el-table :data="tableData">
      <!-- 表格列定义 -->
      <template slot="empty">
        <img v-if="tableData.length === 0" src="empty.png" alt="暂无数据">
      </template>
    </el-table>
  </div>
</template>

<style>
.table-wrapper {
  position: relative;
}

.table-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
    }
  },
}
</script>

注意：需要将 empty.png 图片放到项目的静态资源目录中。

el-table el-table__cell样式失效

el-table是Element UI框架中的一个表格组件，el-table__cell是其中的一个样式类。如果el-table__cell样式失效，可能有以下几个原因：

1. CSS选择器的优先级问题：请确保你的自定义样式选择器的优先级高于Element UI框架的默认样式。可以使用更具体的选择器或者使用!important来提高优先级。

2. 样式覆盖问题：Element UI框架可能已经定义了一些全局样式，导致你的自定义样式无法生效。可以尝试使用scoped或者module的方式来限定样式的作用域，确保只对特定的el-table组件生效。

3. 样式引入问题：请确保你的自定义样式文件已经正确引入，并且在el-table组件之后引入，以确保样式生效。

4. 样式冲突问题：可能存在其他样式与el-table__cell样式冲突，导致样式失效。可以通过浏览器开发者工具检查元素样式，查看是否有其他样式覆盖了el-table__cell样式。