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

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

[DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加表格空状态提示，带插图的空状态，Table7空状态2](#DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加表格空状态提示，带插图的空状态，Table7空状态2)
- 📚页面效果
- 📚整理后主要代码
- - [📘调用 TableView7.vue](#📘调用 TableView7.vue)
- 📚页面效果
- 📚展望
- 📚相关文章

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

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

📚页面效果

📚整理后主要代码

在前面文章DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加表格空状态提示基础上

📘调用 TableView7.vue

html 复制代码

<!-- 示例7: 带插图的空状态 -->
<template>
  <div class="table-container">
    <!-- 添加一个包装容器 -->
    <div class="header">
      <div class="title">客户管理</div>
      <button @click="createProject2">添加数据</button>
    </div>
    <Table
        :data="customers"
        :columns="columns"
        :show-search="true"
        :virtualScroll="true"
        stripe
        border
        size="small"
    >
      <template #empty>
        <div class="illustration-empty">
          <img src="/image/error_404.png" alt="无数据">
          <h3>空空如也</h3>
          <p>点击右上角按钮添加第一条记录</p>
        </div>
      </template>
    </Table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 模拟客户数据
const customers = ref([])

// 列配置
const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { title: '城市', dataIndex: 'city' },
  { title: '会员等级', dataIndex: 'level' },
  { title: '积分', dataIndex: 'points' },
  { title: '最近访问', dataIndex: 'lastVisit' }
]

// 随机生成城市
const cities = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安', '南京', '重庆']
// 会员等级
const levels = ['普通', '白银', '黄金', '铂金', '钻石']
// 随机姓氏
const firstNames = ['张', '李', '王', '赵', '钱', '孙', '周', '吴', '郑', '陈']
// 随机名字
const lastNames = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '洋']

// 创建项目方法
const createProject2 = () => {
  // 生成新的客户数据
  const newCustomer = {
    id: customers.value.length + 1,
    name: firstNames[Math.floor(Math.random() * firstNames.length)] + 
          lastNames[Math.floor(Math.random() * lastNames.length)],
    age: Math.floor(Math.random() * 30) + 20, // 20-50岁
    city: cities[Math.floor(Math.random() * cities.length)],
    level: levels[Math.floor(Math.random() * levels.length)],
    points: Math.floor(Math.random() * 5000) + 1000, // 1000-6000积分
    lastVisit: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000)
      .toISOString()
      .split('T')[0] // 最近30天内的随机日期
  }

  // 添加到客户列表
  customers.value.push(newCustomer)
}
</script>

<style scoped>
/* 添加容器样式 */
.table-container {
  padding: 20px;
  position: relative;
}

/* 添加头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

/* 按钮样式 */
button {
  padding: 8px 16px;
  background: var(--empty-action-color, #409eff);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

button:hover {
  opacity: 0.8;
}

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

.illustration-empty {
  text-align: center;
  padding: 30px 0;
}

.illustration-empty img {
  width: 200px;
  margin-bottom: 16px;
}

.illustration-empty h3 {
  color: #909399;
  font-size: 18px;
  margin-bottom: 8px;
}

.illustration-empty p {
  color: #c0c4cc;
  font-size: 14px;
}
</style>

📚页面效果

📚展望

在 APP 下载量及用户增长数据方面，DeepSeek 同样表现出色。1 月 27 日，DeepSeek 应用登顶 15 个国家和地区的苹果应用商店免费 APP 下载排行榜，在美区苹果 App Store 免费榜从 1 月 26 日的第六位升至第一位，超越 ChatGPT 及 Meta 公司旗下的社交媒体平台 Threads，以及 Google Gemini、Microsoft Copilot 等美国科技公司的生成式 AI 产品。这一现象不仅在中国引发了广泛关注，也在国际上引起了轰动，成为了首个同期在中国和美区苹果 App Store 占据第一位的中国应用。截至 2 月 2 日，DeepSeek 攀升至 140 个国家的苹果 App Store 下载排行榜首位，并在美国的 Android Play Store 中同样占据榜首位置。其下载量在 18 天内达到 1600 万次，几乎是 OpenAI 的 ChatGPT 首次发布时 900 万次下载量的两倍。特别是在印度，自 DeepSeek 的模型在全球 AI 界引起震动后，印度成为了这款应用新用户增长的最大 "引擎"，其下载量占据了所有平台下载总量的 15.6% 。

这些数据直观地反映出 DeepSeek 在全球范围内受到了用户的热烈追捧。它的成功，不仅在于其技术的先进性，还在于其能够满足全球用户多样化的需求。无论是在发达国家还是发展中国家，DeepSeek 都凭借其出色的性能和用户体验，赢得了用户的青睐。

DeepSeek 的全球影响力还体现在其对行业的推动作用上。它的出现，打破了国际 AI 市场原有的格局，促使其他企业加大技术研发投入，推动了整个行业的技术进步和创新发展。同时，DeepSeek 的开源策略也吸引了全球开发者的参与，形成了一个庞大的开发者生态系统，进一步促进了 AI 技术的共享与创新。

DeepSeek 的模型架构基于 Transformer，这是其强大能力的基石。Transformer 架构自 2017 年被提出后，便在人工智能领域掀起了变革的浪潮，彻底革新了自然语言处理（NLP）和计算机视觉（CV）等多个领域的研究范式。它摒弃了传统循环神经网络（RNN）的顺序处理方式，引入了自注意力机制，使得模型在处理序列数据时能够同时关注输入序列的不同位置，高效捕捉长距离依赖关系。这一特性使得 DeepSeek 在处理复杂句子结构和语义时具有显著优势，特别是在需要理解长文本和复杂关系的任务中表现出色。

在 Transformer 架构的基础上，DeepSeek 引入了混合专家（MoE）技术，这是其架构设计的一大创新点。MoE 技术将模型分解为多个专家网络，每个专家专注于特定的任务或数据分布。例如，在自然语言处理任务中，可能会有专门处理语法分析的专家、进行语义理解的专家以及负责文本生成的专家等。通过动态路由机制，MoE 能够根据输入数据的特点，将其分配到最合适的专家网络进行处理，然后再将各个专家的输出进行融合，从而得到最终的结果。这种设计使得模型能够更高效地利用计算资源，避免了在所有任务上都使用整个模型带来的计算浪费，同时也提高了模型的泛化能力和适应性。

以处理一篇包含多种领域知识的长文章为例，当文章中出现医学术语时，MoE 的动态路由机制会将相关部分的文本发送给擅长处理医学领域知识的专家，该专家能够凭借其在医学领域的 "专长"，准确理解和分析这些术语；而当遇到历史事件的描述时，又会将对应的文本路由到熟悉历史领域的专家进行处理。通过这种方式，DeepSeek 能够充分发挥各个专家的优势，实现对复杂文本的高效处理，大大提升了模型的性能和效率。

在具体实现中，MoE 的门控网络（或 "路由器"）起到了关键作用。它通过学习输入数据的特征，确定哪些专家最适合处理当前输入，从而实现动态激活专家网络。这种动态路由机制使得模型能够根据不同的任务和输入数据，灵活调整计算资源的分配，进一步提高了模型的效率和性能。同时，DeepSeek 还通过参数共享机制，在不同的专家网络之间共享部分参数，减少了模型的冗余，提升了模型的整体性能。

在训练过程中，DeepSeek 采用了数据蒸馏技术，这是提升训练效率的关键手段之一。数据蒸馏技术的核心思想是利用一个大型、复杂且性能优异的教师模型，将其知识传递给一个较小、计算效率更高的学生模型。具体来说，首先训练一个性能强大的教师模型，然后使用该教师模型对训练数据进行预测，得到每个样本的概率分布，即软标签。这些软标签包含了比硬标签（如类别标签）更丰富的信息，不仅包含了样本所属类别的信息，还包含了类别之间的相似性和关系信息。接着，使用软标签以及硬标签共同训练学生模型，通过最小化学生模型与教师模型输出之间的差异，让学生模型学习到教师模型的知识和能力。

以图像分类任务为例，假设教师模型在判断一张图片是猫还是狗时，输出的概率分布为猫的概率是 0.8，狗的概率是 0.2；而硬标签只表明这张图片是猫。在训练学生模型时，使用软标签可以让学生模型不仅学习到这张图片是猫这一事实，还能学习到教师模型对于猫和狗之间相似性的判断信息，从而提升学生模型的泛化能力和对不同类别数据的理解能力。

通过数据蒸馏技术，DeepSeek 能够在不显著损失性能的情况下，显著减少模型的大小和计算需求。这使得 DeepSeek 能够在资源受限的设备上，如移动设备和嵌入式系统，也能展现出卓越的性能。同时，数据蒸馏技术还可以加速模型的训练过程，减少训练时间和成本。

除了数据蒸馏技术，DeepSeek 在训练过程中还采用了一系列优化策略来降低成本。例如，在数据预处理阶段，通过精心设计的数据清洗和筛选算法，去除噪声数据和重复数据，提高了训练数据的质量，从而减少了无效计算，提升了训练效率。在模型训练过程中，采用了自适应学习率调整策略，根据训练的进展动态调整学习率，使得模型能够更快地收敛，同时避免了因学习率过大或过小导致的训练不稳定问题。此外，DeepSeek 还利用了分布式训练技术，将训练任务分布到多个计算节点上并行处理，充分利用集群的计算资源，大大缩短了训练时间，降低了训练成本。

DeepSeek 在推理、自然语言处理、图像与视频分析等多领域展现出了卓越的性能，与同类模型相比，具有明显的优势。

在推理能力方面，DeepSeek 的表现十分出色。以文本生成任务为例，在处理常见的新闻写作场景时，当给定主题和相关要点，DeepSeek 能够在极短的时间内生成逻辑连贯、内容丰富的新闻稿件。与同类模型相比，其推理速度优势明显，在同等硬件条件下，生成相同长度文本的时间可能仅为其他模型的一半。在智能客服场景中，DeepSeek 能快速理解用户问题，并及时给出准确回复，平均响应时间控制在秒级，极大提升了用户与客服交互的效率，减少等待时间，增强了用户体验。这得益于其先进的模型架构和推理优化技术，通过对注意力机制的优化，使得模型在处理长序列文本时，计算复杂度显著降低，能够更快速地聚焦关键信息，从而提升推理速度。同时，量化技术的应用也在几乎不损失模型性能的前提下，大幅减少了计算量和存储需求，进一步提高了推理效率。

在自然语言处理领域，DeepSeek 在语言理解和生成方面表现卓越。它能够理解和生成极其自然流畅的文本，无论是日常对话、新闻写作，还是专业领域的学术论文，都能轻松应对。与其他模型相比，DeepSeek 在语言理解的深度和广度上更胜一筹，能够准确把握上下文语境，给出富有逻辑和深度的回答。当被问到如何看待人工智能对未来教育的影响时，DeepSeek 不仅能条理清晰地阐述人工智能在个性化学习、智能辅导等方面的积极作用，还能深入分析可能面临的挑战和问题，如数据隐私、教育公平等，其回答的全面性和专业性令人印象深刻。在多轮对话任务中，DeepSeek 能够保持良好的连贯性，根据前文的内容准确理解用户的意图，并给出合适的回应，使得对话更加自然和流畅。

在代码生成方面，DeepSeek 同样表现出色。它可以根据自然语言描述，快速生成高质量、可运行的代码，支持多种编程语言，包括 Python、Java、C++ 等。对于开发者来说，这大大提高了开发效率，减少了繁琐的代码编写工作。在一次实际测试中，要求生成一个用于数据分析的 Python 脚本，DeepSeek 瞬间给出了完整的代码，并且包含了详细的注释，解释每一步的功能和作用。不仅如此，当对代码提出修改需求时，DeepSeek 也能迅速做出调整，展现出强大的代码理解和修改能力。

在数学推理方面，DeepSeek 能够解决复杂的数学问题，从基础的代数运算到高等数学的微积分、线性代数等，都不在话下。在国际数学竞赛的模拟测试中，DeepSeek 的得分甚至超过了许多人类选手，其解题思路清晰，步骤严谨，展现出了强大的逻辑思维能力。这得益于其在训练过程中对大量数学问题的学习和理解，以及对推理算法的优化，使得它能够准确地分析问题，找到合适的解题方法。

在图像与视频分析领域，DeepSeek 也展现出了强大的能力。在图像识别任务中，它能够准确识别各种物体、场景和图像特征，对于一些复杂的图像，如模糊图像、遮挡图像等，也能通过其强大的特征提取和分析能力，给出准确的判断。在视频分析方面，DeepSeek 可以对视频内容进行理解和分析，识别视频中的关键事件、人物动作、场景变化等信息。例如，在体育赛事视频分析中，它能够准确识别运动员的动作、比赛的关键节点，如进球、得分等，并对比赛进行实时的解说和分析，为观众提供更好的观赛体验。

在多模态融合方面，DeepSeek 能够将文本、图像、音频等多种模态的数据进行有效融合，实现更加智能的交互和应用。例如，在智能客服系统中，用户不仅可以通过文字与客服进行交流，还可以发送图片或语音，DeepSeek 能够综合理解这些多模态信息，准确回答用户的问题，提供更加全面和个性化的服务。在智能驾驶领域，DeepSeek 可以融合摄像头图像、雷达数据、地图信息等多种传感器数据，实现对路况的准确感知和驾驶决策的优化，提高驾驶的安全性和智能化水平。

DeepSeek 通过其独特的技术架构和先进的训练方法，在多个领域展现出了卓越的性能，为人工智能的应用和发展提供了强大的支持。

在政务领域，DeepSeek 的应用正引发一场深刻的变革。以深圳福田区为例，基于 DeepSeek 开发的人工智能办公系统为公职人员配备了 70 名政务 AI "数智员工" 。这些 "数智员工" 如同得力助手，在公文处理、政务服务、社区治理、应急管理、招商引资等 11 大类 240 个政务场景中发挥着重要作用。在公文处理方面，公文格式修正准确率超 95%，审核时间缩短 90%，错误率控制在 5% 以内，极大地提高了公文处理的效率和准确性。在安全生产领域，"安全生产助手" 生成演练脚本效率提升 100 倍，为应急管理工作提供了有力支持。"AI 招商助手" 将企业分析筛选效率提升 30%，分析时间缩至分钟级，助力招商引资工作更加高效地开展。

不仅如此，深圳福田区还首创政务辅助智能机器人 "基本法"，以政府采购、使用的政务辅助智能机器人的全流程管理为主线，构建伦理框架，明确了技术标准、应用范围、安全管理以及监管要求，为智能机器人在政务领域的合法合规运行提供了制度保障，开启了机器人员工和与人类员工协同工作的新纪元。

在广州，人工智能公共算力中心是全国首个开放 DeepSeek-R1 671B 昇腾适配版试用的政务级安全算力中心。接入 DeepSeek 后，该中心为政务部门打造 "智能政策解读员"，帮助政务部门更高效地向市民解读政策，提高政策的知晓度和理解度。同时，它还助力连锁餐饮集团用 AI 强化门店管控、帮助文旅企业开发 "数字导游" 等，为企业和市民提供了更加智能化的服务。

此外，深圳市龙岗区政务服务和数据管理局在政务外网部署上线了 DeepSeek-R1 全尺寸模型，通过区智慧办公系统 (OA)"龙小 i" 应用矩阵，为龙岗全区两万多名公职人员提供服务。新模型上线后，系统运行流畅，快速响应公职人员的各项需求，解决了以往服务器繁忙等问题。在政务办公方面，公文写作助手能进行政策解读、文件起草和智能校对，以往人工校验 1000 字文章至少需四五分钟，还易出错，现在借助 DeepSeek 能秒级完成，公文处理效率大幅提高。拟办意见自动生成功能则可结合政务语境提取关键信息，助力公职人员快速决策。在城市治理领域，"一句话找人 / 找视频" 功能基于多模态大模型，结合 23 万路视频监控，已成功帮市民找回走失人员 300 余次。在民意速办方面，民生诉求智能匹配功能分析诉求情感倾向，自动分类分拨，提高处理精准度，减少重复工单。在数据分析上，以往人工分析民意诉求热点耗时费力，现在 DeepSeek 能在分钟级完成分析，为决策提供有力依据。

深圳福田区和广州等地的实践表明，DeepSeek 在政务领域的应用，不仅提高了政务工作的效率和质量，还为政务服务的创新提供了新的思路和方法。它能够帮助政府更好地满足市民的需求，提升政府的公信力和形象，推动政务工作向智能化、协同化、数据驱动化转变。

在金融领域，DeepSeek 的应用正重塑着金融服务模式，为金融机构带来了更高的效率和更精准的决策支持。江苏银行依托 "智慧小苏" 大语言模型服务平台，成功本地化部署微调 DeepSeek-VL2 多模态模型、轻量 DeepSeek-R1 推理模型，分别运用于智能合同质检和自动化估值对账场景中，实现了金融语义理解准确率与业务效率的双突破。

在智能合同质检方面，"智慧小苏" 通过 DeepSeek-VL2 多模态模型的细粒度文档理解能力，有效解决了传统模型在非制式合同中存在合并单元格、跨页表格等多结构表格内容识别准确率不足、精度局限的问题。该模型将嵌套表格、手写体混合排版等复杂场景的识别成功率提升至领先水平，通过创新的多模态技术与混合专家框架，识别综合准确率跃升至 96%，较传统方案提升 12 个百分点。利用识别结果结合外部数据等方式智能检测校验合同信息，对风险较高的交易提前发出预警，有效防范潜在的信贷风险。利用 DeepSeek 模型优化后，识别及预警响应速度提升 20%，助力分支行更高效地完成受托支付合规性审核。

在自动化估值对账方面，"智慧小苏" 通过轻量化 DeepSeek-R1 推理模型引擎的高效计算特性，完成资产托管估值信息自动化解析录入、自动化对账。传统资产托管估值对账依赖人工处理每日超 2000 封差异化邮件，对 TA 信息、交易信息、估值信息等区分后手工录入比对，存在录入工作量大、对账异常回溯困难等问题。江苏银行应用 R1 推理模型，结合邮件网关解析处理能力，实现邮件分类、产品匹配、交易录入、估值表解析对账全链路自动化处理，识别成功率达 90% 以上，目前已初步实现业务集中运营，按照平均手工操作水平测算，每天可节约 9.68 小时工作量。

苏商银行也积极应用 DeepSeek，取得了显著成效。苏商银行应用 DeepSeek VL2 多模态模型处理非标材料，如表格、影像资料、文档图片等识别，将信贷材料综合识别准确率提升至 97%。同时，将 DeepSeek R1 推理模型集成到自主研发的 "开发助手"，使核心系统迭代周期缩短 30%。此外，苏商银行还将 DeepSeek 的蒸馏技术应用于信贷风控、反欺诈等 20 多个场景，使尽调报告生成效率提升 40%，欺诈风险标签准确率提升 35%。

📚相关文章

------------ 相　关　文　章 ------------

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。

更多专栏订阅推荐：

👍 html+css+js 绚丽效果

💕 vue

✈️ Electron

⭐️ js

📝 字符串

✍️ 时间对象（Date()）操作

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

目录

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

📚页面效果

📚整理后主要代码

📘调用 TableView7.vue

📚页面效果

📚展望

📚相关文章