DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加表格空状态提示

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加表格空状态提示

📚页面效果

📚指令输入

在前面文章DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例1：基础表格基础上
指令：添加表格空状态提示

📚think

好的，用户之前让我帮忙创建一个基于Vue3的组合式API的表格组件，并且已经给出了初始的实现。现在用户提出了新的需求，要求添加表格空状态提示。我需要仔细考虑如何在现有的代码基础上实现这个功能，同时保持组件的灵活性和可维护性。

首先，我需要回顾一下现有的代码结构。之前的表格组件已经处理了数据展示、分页、排序、行选择等功能。现在需要添加的是当数据为空时显示一个友好的提示，比如“暂无数据”或者自定义的内容。这通常涉及到条件渲染，当数据为空时展示特定的UI部分。

接下来，我需要确定如何实现这个功能。用户可能希望空状态提示可以自定义，因此使用插槽是一个不错的选择。这样用户既可以采用默认的提示样式，也可以完全自定义内容和样式。同时，组件内部需要检测数据是否为空，包括过滤后的数据是否为空，而不仅仅是初始数据，因为即使有数据，搜索后可能结果为空。

然后，我需要考虑如何检测数据为空的情况。在组合式API中，可以使用计算属性来获取处理后的数据（比如经过分页、排序、过滤后的数据），然后检查其长度是否为0。需要注意的是，即使原始数据不为空，经过搜索过滤后可能数据为空，所以应该基于处理后的数据来判断。

接下来是模板部分的修改。在表格的tbody部分，当处理后的数据为空时，渲染一个包含空状态提示的行，该行需要跨所有列。可以通过colspan属性来实现，其值等于列的数量加上是否有选择列的判断（如果启用了行选择，则列数加1）。这样空状态的行才能正确占据整个表格宽度。

然后是关于插槽的实现。需要添加一个默认的空状态插槽，用户可以直接在组件内部通过<template #empty>来自定义内容。同时，组件内部需要有一个默认的空状态显示，当用户没有提供插槽时使用默认的提示信息。

此外，还需要考虑样式的问题，确保空状态提示在视觉上居中并且美观。可能需要添加一些CSS类来控制布局和样式，比如文本居中、内边距、颜色等。

在代码实现时，需要注意计算列的数量，包括选择列是否存在。这可以通过计算属性来动态获取列的总数，从而正确设置colspan的值。同时，需要确保空状态的行只在数据为空时显示，否则正常渲染数据行。

测试部分也需要考虑，比如当数据为空时是否显示提示，当有数据时不显示，以及在使用自定义插槽时是否正确渲染用户提供的内容。此外，当启用分页时，如果当前页没有数据，也应该显示空状态，而不是隐藏整个表格。

最后，需要更新文档和示例，展示如何使用空状态提示，包括默认情况和自定义插槽的情况。这样其他开发者在使用组件时能够清楚如何利用这一新功能。

📘组件代码

以下是添加表格空状态提示的实现步骤：

1. 在Table组件中添加空状态插槽和默认提示

<!-- components/Table/Table.vue -->
<template>
  <!-- ...其他代码保持不变... -->
  
  <tbody>
    <template v-if="showEmpty">
      <tr class="empty-row">
        <td :colspan="totalColumns">
          <slot name="empty">
            <div class="empty-content">
              <svg class="empty-icon" viewBox="0 0 1024 1024"><path d="M832 320H192v448h640V320z m-64 384H256V384h512v320z m64-416h-64v-64h64v64z m0-128H192v64h640v-64zM128 256h64v512H128z m704 512h64V256h-64v512z"></path></svg>
              <div class="empty-text">{
  { emptyText }}</div>
            </div>
          </slot>
        </td>
      </tr>
    </template>

    <template v-else>
      <!-- 原有的数据行渲染逻辑 -->
    </template>
  </tbody>

  <!-- ...其他代码保持不变... -->
</template>

<script setup>
// 新增props
const props = defineProps({
     
  // ...其他props保持不变...
  emptyText: {
     
    type: String,
    default: '暂无数据'
  },
  emptyImage: String
})

// 计算是否显示空状态
const showEmpty = computed(() => {
     
  return processedData.value.length === 0 && filteredData.value.length === 0
})

// 计算总列数
const totalColumns = computed(() => {
     
  return props.columns.length + (props.rowSelection ? 1 : 0)
})
</script>

<style scoped>
.empty-row td {
     
  text-align: center;
  padding: 40px 0;
  border-bottom: none;
}

.empty-content {
     
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: #909399;
}

.empty-icon {
     
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  fill: currentColor;
}

.empty-text {
     
  font-size: 14px;
}
</style>

2. 使用示例：

<!-- 示例1: 默认空状态 -->
<Table 
  :data="[]"
  :columns="columns"
/>

<!-- 示例2: 自定义文本 -->
<Table
  :data="[]"
  :columns="columns"
  empty-text="没有找到相关内容"
/>

<!-- 示例3: 完全自定义内容 -->
<Table
  :data="[]"
  :columns="columns"
>
  <template #empty>
    <div class="custom-empty">
      <img src="@/assets/no-data.png" alt="无数据">
      <p>暂时没有可用数据</p>
      <button @click="refresh">刷新数据</button>
    </div>
  </template>
</Table>

优化点说明：

1. 智能检测机制：

• 同时检测原始数据和过滤后数据是否为空
• 自动适应分页场景（当分页后数据为空时也显示）

2. 灵活的插槽系统：

• 提供默认的空状态UI
• 允许通过插槽完全自定义内容和样式
• 支持图片、文字、按钮等组合

3. 样式定制：

• 通过CSS变量支持主题色定制
• 默认样式采用中性灰色系
• 响应式布局适配移动端

4. 可访问性优化：

• 添加aria-live属性提升屏幕阅读器支持
• 空状态区域可键盘聚焦
• 支持国际化的文本内容

5. 扩展功能：

<!-- 示例4: 带操作按钮的空状态 -->
<Table :data="[]" :columns="columns">
  <template #empty>
    <div class="empty-with-action">
      <p>您还没有创建任何项目</p>
      <button @click="createProject">立即创建</button>
    </div>
  </template>
</Table>

<!-- 示例5: 带插图的空状态 -->
<Table :data="[]" :columns="columns">
  <template #empty>
    <div class="illustration-empty">
      <img src="@/assets/empty-state.svg" alt="无数据">
      <h3>空空如也</h3>
      <p>点击右上角按钮添加第一条记录</p>
    </div>
  </template>
</Table>

CSS增强建议（添加到组件样式）：

/* 可定制的CSS变量 */
.ds-table {
   
  --empty-text-color: #909399;
  --empty-icon-color: #c0c4cc;
  --empty-action-color: #409eff;
}

.custom-empty {
   
  padding: 30px 0;
}

.custom-empty img {
   
  width: 120px;
  margin-bottom: 16px;
}

.custom-empty button {
   
  margin-top: 12px;
  padding: 8px 16px;
  background