秦皇岛建设局网站6定制型营销网站建设

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

---

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

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，基础加载状态

📚页面效果

📚整理后主要代码

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

📘调用 TableView8.vue

<!-- 示例8: 基础加载状态 -->
<template><Table:data="[]":columns="columns":loading="true":virtualScroll="true"/>
</template><script setup>
import Table from '@/components/Table/Table.vue'</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>

📚测试代码正常跑通，附其他基本代码

• 添加路由
• 页面展示入口

📘编写路由 src\router\index.js

import { createRouter, createWebHistory } from 'vue-router'
import RightClickMenuView from '../views/RightClickMenuView.vue'
import RangePickerView from '../views/RangePickerView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'progress',component:  () => import('../views/ProgressView.vue'),},{path: '/tabs',name: 'tabs',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.// 标签页（Tabs）component: () => import('../views/TabsView.vue'),},{path: '/accordion',name: 'accordion',// 折叠面板（Accordion）component: () => import('../views/AccordionView.vue'),},{path: '/timeline',name: 'timeline',// 时间线（Timeline）component: () => import('../views/TimelineView.vue'),},{path: '/backToTop',name: 'backToTop',component: () => import('../views/BackToTopView.vue')},{path: '/notification',name: 'notification',component: () => import('../views/NotificationView.vue')},{path: '/card',name: 'card',component: () => import('../views/CardView.vue')},{path: '/infiniteScroll',name: 'infiniteScroll',component: () => import('../views/InfiniteScrollView.vue')},{path: '/switch',name: 'switch',component: () => import('../views/SwitchView.vue')},{path