表格数据为空？用图片占位更显眼！Element UI空状态案例

前端

2023-09-30 16:54:30

用图片占位点亮空表格，打造视觉盛宴

痛点聚焦：空表格数据，视觉单调乏味

当我们使用数据表格展示数据时，不可避免地会遇到空数据的情况。此时，空洞的表格会给人一种单调乏味的感觉，影响整体的用户体验。如何解决这一痛点，让空表格变得生动有趣呢？

解决方案：自定义图片占位，提升视觉表现力

为了解决空表格数据的视觉单调问题，我们可以借助 Element UI 中的 Empty 组件。该组件支持自定义图片占位，让空表格不再空洞，提升其视觉表现力。

实现步骤：图片占位，打造视觉盛宴

引入 Empty 组件： 在应用中引入 Element UI 中的 Empty 组件。
添加自定义图片： 在 Empty 组件中添加自定义图片。可以通过设置 src 属性指定图片路径。
设置图片大小和位置： 通过设置 style 属性，可以自定义图片的大小和位置，使其在空状态中完美呈现。

优势解析：图片占位，独树一帜

使用图片占位空表格具有以下优势：

提升视觉表现力： 图片可以丰富视觉效果，让空表格变得更加生动、有趣。
增加趣味性： 图片可以为用户带来惊喜，增加应用的趣味性。
增强用户互动： 图片可以吸引用户的注意力，让用户产生兴趣，增强用户互动。

示例演示：图片占位，焕然一新

以下示例演示了如何在 Element UI 中使用自定义图片来占位空表格：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column property="name" label="姓名"></el-table-column>
      <el-table-column property="age" label="年龄"></el-table-column>
    </el-table>

    <el-empty v-if="tableData.length === 0">
      <img src="https://xxx.com/image.png" style="width: 100px; height: 100px;">
      <p>暂无数据</p>
    </el-empty>
  </div>
</template>

<script>
import { ElTable, ElTableColumn, ElEmpty } from 'element-ui'

export default {
  components: { ElTable, ElTableColumn, ElEmpty },
  data() {
    return {
      tableData: []
    }
  }
}
</script>