别让“暂无数据”劝退你的用户！用 el-table 的 empty 插槽创造惊艳的空状态体验 ✨

原创已于 2025-07-02 14:36:55 修改 · 1.3k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2025-07-01 21:05:26 首次发布

vue2 和 element-ui 专栏收录该内容

138 篇文章

订阅专栏

别让“暂无数据”劝退你的用户！用 `el-table` 的 `empty` 插槽创造惊艳的空状态体验 ✨

大家好！作为前端开发者，我们精心打磨每一个交互细节，但常常会忽略一个最容易被用户看到的场景——空状态 (Empty State)。当用户第一次进入一个页面，或者清空了所有数据时，那个冷冰冰的“暂无数据”文本，就像一堵无形的墙，让用户感到迷茫和无助。

你是否想过，这个“空状态”其实是一个绝佳的“黄金广告位”？它完全可以从一个消极的终点，转变为一个积极的、充满引导性的起点。

今天，我们就来解锁 Element UI 中 el-table 组件一个强大但易被忽视的特性——empty 插槽，看看如何用它来替换掉乏味的“暂无数据”，创造出能引导用户、提升体验的惊艳设计！

快速概览：从“暂无数据”到“功能指引”的蜕变 📝

对比项	默认行为 (Default Behavior)	使用 `empty` 插槽 (Using `empty` Slot)	核心技术 (Key Technology)	带来的价值 (Value)
空状态显示	一行简单的文本：“暂无数据”。	显示一个自定义的、内容丰富的 Vue 组件。	Vue.js (一种流行的前端框架) 的具名插槽 (Named Slot)：`<template #empty>...</template>`。	化消极为积极：将无信息的空状态，转变为有价值的引导状态。
用户感受	迷茫、无助，不知道下一步该做什么。	清晰、友好，用户能立刻理解该功能的作用并知道如何开始操作。	组件化思想：将引导内容封装成独立的组件（如 `FunctionGuideMain`），实现复用。	提升用户体验 (UX - User Experience)，特别是新用户的首次引导 (Onboarding) 体验。
实现方式	`el-table` 内置的默认行为。	在 `<el-table>` 标签内部，插入一个 `<template #empty>` 块，并在其中填充任意你想要的 HTML (HyperText Markup Language, 超文本标记语言) 或 Vue 组件。	CSS (Cascading Style Sheets, 层叠样式表) 布局：使用 `display: grid` 和 `place-items: center center` 实现内容的完美居中。	高度定制化：可以根据不同页面的业务场景，显示完全不同的、针对性的引导内容。

一句话总结: el-table 的 empty 插槽允许我们用一个自定义的 Vue 组件，来替换掉默认的“暂无数据”文本，从而将空状态从一个信息的“死胡同”变成一个引导用户操作的“欢迎垫”。

案发现场：一个典型的列表页 🧐

让我们来看一下这段代码。在一个“套装选配”的功能页面中，有一个用于显示方案列表的 el-table。

<!-- suit-selection-list.vue -->
<el-table :data="list" ...>
  <!-- ... 一堆 el-table-column 定义 ... -->

  <!-- 如果不加下面这段，当 list 为空时，只会显示“暂无数据” -->

  <!-- ✨ 魔法发生在这里 ✨ -->
  <template #empty>
    <div style="display: grid; place-items: center center;">
      <function-guide-main :type="117" />
    </div>
  </template>
</el-table>

代码剖析：`#empty` 插槽的魔力

<template #empty>:
- 这是 Vue.js 2.6+ 版本中具名插槽的简写语法，等同于 <template v-slot:empty>。
- 它告诉 el-table 组件：“嘿，当你要显示‘空数据’内容时，别用你自己的了，用我这个模板里的东西来替换掉你的‘暂无数据’文本。”
<div style="display: grid; place-items: center center;">:
- 这是一个小巧而强大的 CSS 技巧，用于实现完美的水平垂直居中。它确保了无论表格有多高，我们自定义的内容总能优雅地显示在正中间。
<function-guide-main :type="117" />:
- 这是真正的“主角”。我们没有在这里写一堆静态的 HTML，而是直接渲染了一个独立的、可复用的 Vue 组件。
- :type="117" 这个 prop (Property, 属性) 非常关键。它告诉 function-guide-main 组件：“请去加载类型为 117（代表‘套装选配’功能）的指引内容。”
- function-guide-main 组件内部会调用我们之前分析过的 /api/functionGuide/findByType?type=117 接口，获取相关的图片和链接，然后用一个漂亮的轮播图或列表展示出来。