当前位置：首页 > news >正文

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固定表头表格

news 来源：原创 2025/8/15 5:26:00

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

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固定表头表格
- 📚页面效果
- - 📘组件代码
- 📚代码测试
- 📚测试代码正常跑通，附其他基本代码
- - 📘编写路由 src\router\index.js
  - 📘编写展示入口 src\App.vue
- 📚页面效果
- 📚展望

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

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固定表头表格

📚页面效果

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固定表头表格

📘组件代码

<!-- TableView14_03.vue 可展开行的固定表头表格 -->
<template><div class="table-demo"><h2>13. 添加表头固定功能,可展开行的固定表头表格</h2><p class="description">使用 expandable 和相关插槽实现行展开功能</p><div class="table-container"><Table:data="customers":columns="columns"fixed-headerfixed-header-height="300px"expandable:expanded-keys="expandedKeys"@expand="handleExpand"resizableborderref="tableRef"><!-- 添加展开按钮列 --><template #cell-expand="{ row }"><button class="expand-button"@click="handleExpand(row)":title="`ID: ${row.id}`">{{ expandedKeys.includes(row.id) ? '−' : '+' }}</button></template><!-- 展开行的内容 --><template #expanded-row="{ row }"><div class="expanded-content"><h4>{{ row.name }}的详细信息</h4><div class="info-grid"><div class="info-item"><span class="label">注册时间：</span><span>{{ row.registerTime }}</span></div><div class="info-item"><span class="label">最近登录：</span><span>{{ row.lastLogin }}</span></div><div class="info-item"><span class="label">消费总额：</span><span>¥{{ row.totalSpent }}</span></div><div class="info-item"><span class="label">订单数：</span><span>{{ row.orderCount }}</span></div></div></div></template></Table></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import Table from '@/components/Table/Table.vue'const tableRef = ref(null)const customers = ref([{id: 1,name: '张三',age: 28,city: '北京',level: '黄金',registerTime: '2023-01-15',lastLogin: '2024-03-10',totalSpent: 15800,orderCount: 23},{id: 2,name: '李四',age: 35,city: '上海',level: '白银',registerTime: '2023-03-20',lastLogin: '2024-03-09',totalSpent: 8500,orderCount: 12},{id: 3,name: '王五',age: 42,city: '广州',level: '铂金',registerTime: '2022-12-10',lastLogin: '2024-03-08',totalSpent: 25600,orderCount: 45}
])const columns = ref([{ title: '', dataIndex: 'expand', width: '50px',fixed: 'left',customCell: true },{ title: '姓名', dataIndex: 'name', width: '120px' },{ title: '年龄', dataIndex: 'age', width: '80px' },{ title: '城市', dataIndex: 'city', width: '120px' },{ title: '会员等级', dataIndex: 'level', width: '120px' }
])const expandedKeys = ref([])const handleExpand = (row) => {const index = expandedKeys.value.indexOf(row.id)if (index > -1) {expandedKeys.value.splice(index, 1)} else {expandedKeys.value.push(row.id)}expandedKeys.value = [...expandedKeys.value]
}// 确保表格组件已经挂载
onMounted(() => {// 可以在这里进行一些初始化操作console.log('表格组件已挂载:', tableRef.value)
})
</script><style scoped>
.table-demo {padding: 20px;
}.description {margin: 16px 0;color: #666;
}.table-container {border: 1px solid #ebeef5;border-radius: 4px;position: relative;height: 400px;  /* 设置固定高度 */
}:deep(.table-container) {height: 300px;
}:deep(.body-container) {padding-top: 41px;  /* 使用 padding-top 替代 margin-top */
}:deep(.fixed-header-container) {background: white;z-index: 10;
}.expand-button {width: 24px;height: 24px;line-height: 22px;text-align: center;border: 1px solid #dcdfe6;border-radius<

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固定表头表格

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固…...

编程日记 2025/8/15 5:26:00

【Java 优选算法】分治 - 快速排序

欢迎关注个人主页：逸狼创造不易，可以点点赞吗~ 如有错误，欢迎指出~ 分治算法就是将一个问题划分为多个相同类型的子问题,解决这些子问题即解决该类问题颜色分类题目链接解法利用三指针, i, left, right,将数组分为4个区间,如下图 …...

编程日记 2025/8/15 5:16:44

Kafka相关的面试题

以下是150道Kafka相关的面试题及简洁回答： Kafka基础概念 1. 什么是Kafka？ Kafka是一个分布式、可扩展、容错的发布-订阅消息系统，最初由LinkedIn开发，现为Apache项目。它适用于高吞吐量的场景，如大数据处理和实时数据…...

编程日记 2025/8/11 2:50:13

Java基础面经

Java 基础面试官：重写与重载的区别？ 重载：发生在同一个类中，若多个方法之间方法名相同、参数列表不同，则它们构成重载的关系。重载与方法的返回值以及访问修饰符无关，即重载的方法不能根据返回类型进行…...

编程日记 2025/8/13 10:47:56

Let’s Build AI- 实用AI导航网站

Let’s Build AI Let’s Build AI是一个在线实用AI导航网站，由社区驱动的平台，致力于为 AI 爱好者和开发人员共享资源、工具和知识等等，通过GitHub编辑内容更新，目前包括数据库、模型、开发者工具、ChatGPT提示、图像生成、模型开…...

编程日记 2025/8/15 5:22:28

Spring Boot集成EasyExcel

1. 初始化Spring Boot项目首先，使用Spring Initializr（https://start.spring.io/）生成一个基本的Spring Boot项目。选择以下依赖项： Spring WebLombok (用于减少样板代码)SLF4J (用于日志记录) 2. 添加依赖在你的pom.xml文件…...

编程日记 2025/8/15 5:20:23

2024年12月CCF-GESP编程能力等级认证C++编程六级真题解析

CCF-GESP C++六级真题难度与考察范围深度解析考试定位与整体难度 CCF-GESP C++六级认证属于高阶编程能力考核，难度显著高于五级，接近信息学竞赛提高组水平，重点考察复杂算法设计、面向对象编程（OOP）深度应用及高级数据结构实现能力。试题要求考生具备将数学建模与算法优化…...

编程日记 2025/8/14 2:27:04

网络VLAN技术详解：原理、类型与实战配置

网络VLAN技术详解：原理、类型与实战配置 1. 什么是VLAN？ VLAN（Virtual Local Area Network，虚拟局域网） 是一种通过逻辑划分而非物理连接隔离网络设备的技术。它允许管理员将同一物理网络中的设备划分为多个独立的广播…...

编程日记 2025/8/13 9:36:56

深入探讨RAID 5的性能与容错能力：实验与分析(磁盘阵列)

前言—— 本实验旨在探讨 RAID 5 的性能和容错能力。通过创建 RAID 5 阵列并进行一系列读写性能测试及故障模拟，我们将观察 RAID 5 在数据冗余和故障恢复方面的表现，以验证其在实际应用中的可靠性和效率。首先说明：最少三块硬盘, 使用 4 块…...

编程日记 2025/8/13 7:06:11

如何让ai问答机器人通人性？

领域专用的问答机器人，数据是灵魂。通用模型的问题在于，它们虽然知识广博，但对特定领域的深度理解不足。解决这个问题的第一步，就是构建一个高质量的领域知识库。数据要精准且全面想让机器人真正“懂”一个领域，数…...

编程日记 2025/8/12 19:42:00

重生之我在学Vue--第11天 Vue 3 高级特性

重生之我在学Vue–第11天 Vue 3 高级特性文章目录重生之我在学Vue--第11天 Vue 3 高级特性前言一、Teleport：打破组件层级的瞬移术1. 什么是Teleport？2. 核心用法3. 实战技巧二、Suspense：异步组件的优雅过渡1. 为什么需要Suspense&#x…...

编程日记 2025/8/13 23:55:56

汽车无钥匙启动系统不使用传统机械钥匙启动汽车

汽车无钥匙启动系统定义汽车无钥匙启动系统（Keyless Start System），启动车辆时不用掏拧钥匙，只需把钥匙放在包内或口袋里，按下车内按键或拧动导板即可使发动机点火。它无需插入钥匙，通过点按按键或旋转…...

编程日记 2025/8/5 20:09:45

平安养老险深圳分公司积极开展2025年“3·15”金融消费者权益保护教育宣传活动

为深刻把握金融工作的政治性、人民性，帮助社会公众增强维护自身合法权益的意识和能力，平安养老险深圳分公司在2025年3月7日至3月15日期间，以“保障金融权益，助力美好生活”为口号，聚焦“维护权益”主题，全面…...

编程日记 2025/8/13 16:43:18

python 实现 A* 算法

A*算法是一种广泛使用的路径搜索算法，结合了启发式搜索和Dijkstra算法的优点。它通过评估每个节点的代价函数 ( f(n) g(n) h(n) ) 来选择最优路径，其中： ( g(n) ) 是从起点到当前节点的实际代价。( h(n) ) 是从当前节点到目标节点的启发式…...

编程日记 2025/8/9 19:49:19

MyBatis 如何创建 SqlSession 对象的？

MyBatis 创建 SqlSession 对象的过程主要由 SqlSessionFactory 接口及其实现类来完成。以下是详细步骤： 1. SqlSessionFactory 接口: SqlSessionFactory 是 MyBatis 的核心接口之一，它负责创建 SqlSession 对象。你可以将 SqlSessionFactory 视为 Sql…...

编程日记 2025/8/14 13:15:50

微服务》》四个问题

客户端如何访问 API 网关如 Core中 Ocelot技术服务如何治理服务注册与发现如 Core中的 consul技术服务挂了怎么办可以利用重试机制、限流、熔断、降级等服务之间通信问题》》同步 1. Http 对外跨防火墙【序列化、反序列化 2 （ 因为http是应用层…...

编程日记 2025/8/13 18:30:23

CockroachDB MCP -cursor适用

CockroachDB MCP 服务器 GitHub仓库置顶这是一个用于 Cursor 的 CockroachDB MCP 服务器，基于 Model Context Protocol (MCP) 规范实现，可以让你在 Cursor 中直接与 CockroachDB 数据库交互。功能连接到 CockroachDB 数据库获取数据库中的所有表获…...

编程日记 2025/8/11 11:29:54

for(int i1;i<5;i){//这里的所有语句都会被执行 5 次 } int main(){pen.a(200,16,1,0).a(200,-16,1,0);pen.rt(16).fd(200).bk(200);pen.lt(32).fd(200).bk(200);///pen.rt(-32).fd(200).bk(200);for(int i1;i<5;i){pen.a(200,16,1,0).a(200,-16,1,0);pen.rt(16).fd(200)…...

编程日记 2025/8/9 13:17:24

【机器学习】基于t-SNE的MNIST数据集可视化探索

一、前言在机器学习和数据科学领域，高维数据的可视化是一个极具挑战但又至关重要的问题。高维数据难以直观地理解和分析，而有效的可视化方法能够帮助我们发现数据中的潜在结构、模式和关系。本文以经典的MNIST手写数字数据集为例，探讨如何利…...

编程日记 2025/8/13 16:25:19

Vscode工具开发Vue+ts项目时vue文件ts语法报错-红波浪线等

Vscode工具开发Vuets项目时vue文件ts语法报错-红波浪线等解决方案问题如题描述，主要原因是开发工具使用的代码检查与项目的中的ts不一致导导致，解决办法，修改 vscode 中， 快捷键：command shift p, 输入&#xff…...

编程日记 2025/7/24 16:16:54

Python在数据处理中的应用：从入门到精通

活动发起人小虚竹想对你说： 这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧&#xff01…...

编程日记 2025/8/10 6:36:02

vue3实现跨页面缓存

避免频繁向后端发送请求,vue3中,可以用缓存机制,为了实现跨页面缓存,可以把缓存放到localsotrage里面关键代码: const globalCache JSON.parse(localStorage.getItem(globalCache)) || {}; 然后加一个forceRefresh关键字, const fetchData async (forceRefresh false) …...

编程日记 2025/8/11 12:17:56

YOLO优化之多信息融合MIF

设计背景在目标检测领域，随着深度学习技术的不断进步，研究者们一直在寻求提高模型性能和效率的方法。其中，多模态数据融合作为一种有效的策略，近年来受到了广泛关注。多模态融合旨在将来自不同传感器或模态的数据进行整合，以提供更全面、丰富的信息供模型学习和推断。…...

编程日记 2025/8/6 3:41:02

人工智能与人的智能，改变一生的思维模型【8】逆向思维

逆向偏差思维模型：顶尖高手如何「反常识」破局 （斯坦福决策科学中心认证的逆向思考框架） 一、直击本质：什么是逆向偏差思维？ 定义： 逆向偏差思维是一种主动对抗本能认知倾向的决策模式，通过系…...

编程日记 2025/8/8 14:31:47

Python 科学计算与机器学习入门：NumPy + Scikit-Learn 实战指南

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/8/10 12:43:57

深入理解 Qt 系统托盘图标：创建自定义的系统托盘图标类

文章目录深入理解 Qt 系统托盘图标：创建自定义的系统托盘图标类1. 什么是 QSystemTrayIcon？2. 自定义系统托盘图标类：SysTraylcon3. 代码解析1. **类的定义**2. **构造函数：SysTraylcon::SysTraylcon(QWidget *parent)**3. **ini…...

编程日记 2025/8/10 14:50:31

DeepSeek-R1 面试 -—— GRPO

DeepSeek训练中应用的GRPO算法，它源自于强化学习领域的PPO算法。GRPO与PPO算法之间存在哪些差异？这两种算法各自的优劣何在？为何DeepSeek选择采用GRPO算法而非PPO算法？本文将对这些问题提供解答。一、PPO算法 PPO（Pr…...

编程日记 2025/8/14 5:48:04

AI作曲DiffRhythm原理及本地部署

1.原理简介最近AI在音乐生成方面的进展引起了极大的关注，但现有的方法面临着严重的限制。一些当前的生成模型只能合成人声或伴奏轨道。虽然一些模型可以生成组合的人声和伴奏，但它们通常依赖于精心设计的多阶段级联架构和复杂的数据管道，阻…...

编程日记 2025/8/8 14:37:22

农业电商|基于SprinBoot+vue的农业电商服务系统(源码+数据库+文档)

农业电商服务系统目录基于SprinBootvue的农业电商服务系统一、前言二、系统设计三、系统功能设计 5.1系统功能实现 5.2后台模块实现 5.2.1管理员模块实现 5.2.2商家模块实现四、数据库设计五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码…...

编程日记 2025/8/13 10:58:18

深度学习有哪些算法？

深度学习包含多种算法和模型，广泛应用于图像处理、自然语言处理、语音识别等领域。以下是主要分类及代表性算法： 一、基础神经网络多层感知机（MLP） 最简单的深度学习模型，由多个全连接层组成，用于分类和回…...

编程日记 2025/8/14 1:12:18

鸿蒙开发-一多开发之媒体查询功能

在HarmonyOS中，使用ArkTS语法实现响应式布局的媒体查询是一个强大的功能，它允许开发者根据不同的设备特征（如屏幕尺寸、屏幕方向等）动态地调整UI布局和样式。以下是一个使用媒体查询实现响应式布局的实例： 1. 导入必要…...

编程日记 2025/7/11 19:47:22

历年华中科技大学计算机考研复试上机真题

历年华中科技大学计算机考研复试上机真题 2022华中科技大学计算机考研复试上机真题 2021华中科技大学计算机考研复试上机真题 2019华中科技大学计算机考研复试上机真题在线评测：https://pgcode.cn 八进制题目描述输入一个整数，将其转换成八进制数…...

编程日记 2025/8/14 2:18:24

卷积神经网络（CNN）的主要架构

卷积神经网络（CNN, Convolutional Neural Networks）是深度学习中最重要的模型之一，广泛应用于计算机视觉、目标检测、语义分割等任务。自 LeNet 诞生以来，CNN 结构经历了多个重要发展阶段，出现了许多经典架构&#xff…...

编程日记 2025/8/11 18:41:45

IDEA：项目结构不见了，项目文件消失解决

IDEA：看不见目录结构了。 1、确认项目是否仍存在：检查项目文件夹是否仍然存在于磁盘上。如果项目文件夹被删除或移动了，您需要将其还原或重新导入到IDEA中。 2、重新导入项目：如果项目文件存在，在 IDEA 中找到项目文…...

编程日记 2025/8/6 19:26:42

基于ssm的宠物医院信息管理系统(全套)

编程日记 2025/8/14 15:39:01

How to install a package in offline scenario in Ubuntu 24.04

概述做过信创项目的兄弟们在工作上每天可能面对很多需要解决的问题，不过，有一类问题可能是大家经常遇的，比方说，有时候我们不得不硬着头皮在离线生产环境中安装某些软件包，相信很多兄弟被这种细碎的小事搞得焦头烂额…...

编程日记 2025/8/13 6:06:57

将pdf或者word转换成base64格式

废话不多说直接上代码： function fileToBase64(file) {return new Promise((resolve, reject) > {const reader new FileReader();reader.readAsDataURL(file);reader.onload function (event) {const base64Data event.target.result.split(,)[1];resolve(b…...

编程日记 2025/8/10 20:09:00

使用Nodejs基于DeepSeek加chromadb实现RAG检索增强生成本地知识库

定义检索增强生成（RAG）的基本定义检索增强生成（Retrieval-Augmented Generation，简称RAG）是一种结合了信息检索技术与语言生成模型的人工智能技术。RAG通过从外部知识库中检索相关信息，并将其作为提示&…...

编程日记 2025/8/14 13:57:11

乐观锁VS分布式锁实现抢单服务

司机开始接单，乘客填写出发地——目的地，开始下单 service-order模块 Operation(summary"司机抢单") GetMapping("/robNewOrder/{driverId}/{orderId}") public Result<Boolean> robNewOrder(PathVariable Long driverId,P…...

编程日记 2025/8/9 22:18:27

通过特征值和特征向量实现的图像压缩和特征提取

前文，我们在学习人工智能的线性代数基础的时候，就了解到，矩阵在人工智能中被广泛使用，接下来我们就从大家非常常见的图像开始，深度理解矩阵在人工智能中的应用。有关线性代数基础的文章可以看的我CSDN:人工智能中的线性…...

编程日记 2025/8/13 17:54:56

ranger集成starrock报错

org.apache.ranger.plugin.client.HadoopException: initConnection: Unable to connect to StarRocks instance, please provide valid value of field : {jdbc.driverClassName}.. com.mysql.cj.jdbc.Driver. 可能的原因 JDBC 驱动缺失：运行环境中没有安装 MySQL …...

编程日记 2025/8/10 10:33:25

第J2周：ResNet50V2算法实现01（Tensorflow硬编码版）

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊目标使用tensorflow实现ResNetV50V2的网络结构。本次根据第一层的细节手动硬编码，没有任何的优化，只为了更好的理解细节。目录结构&…...

编程日记 2025/8/10 11:39:17

论文分享 | HE-Nav: 一种适用于复杂环境中空地机器人的高性能高效导航系统

阿木实验室始终致力于通过开源项目和智能无人机产品，为全球无人机开发者提供强有力的技术支持，并推出了开源项目校园赞助活动，助力高校学子在学术研究与技术创新中取得更大突破。近日，香港大学王俊铭同学，基于阿木实验…...

编程日记 2025/8/9 11:43:54

【mysql】centOS7安装mysql详细操作步骤！—通过tar包方式

【mysql】centOS7安装mysql详细操作步骤！ linux系统安装mysql版本需要 root 权限，使用 root 用户进行命令操作。使用tar文件包，安装，gz包也可以但是还需要配置用户，tar包虽然大，但是全啊！ 1. …...

编程日记 2025/8/12 20:39:11

java学习笔记1

程序编译步骤 java程序执行步骤相关代码及解释： /* 对第一个java程序进行总结 1. java程序编写-编译-运行的过程编写：我们将编写的java代码保存在以".java"结尾的源文件中编译：使用javac.exe命令编译我们的java源文件。格式&am…...

编程日记 2025/8/9 17:06:05

强大的数据库DevOps工具：NineData 社区版

本文作者司马辽太杰， gzh：程序猿读历史在业务快速变化与数据安全日益重要的今天，生产数据库变更管理、版本控制、数据使用是数据库领域的核心挑战之一。传统的解决方式往往采用邮件或即时通讯工具发起审批流程，再通过堡垒机直连数…...

编程日记 2025/8/12 19:46:35

「Unity3D」UGUI运行时设置元素的锚点Anchor，维持元素Rect的显示不变，即待在原处

在编辑器中，通过设置Raw edit mode，可以切换两种，元素锚点的改变模式： 一种是锚点单独改变，即：不开启原始模式，保持原样，改变anchoredPosition与sizeDelta。一种是锚点联动显示&…...

编程日记 2025/8/14 8:19:47

深入解析大语言模型的 Function Call 实现—— 以 Qwen2.5为例

引言在现代大语言模型（LLM）中，Function Call（函数调用）能力极大地提升了模型的实用性，使其能够调用外部 API、执行复杂计算或获取实时数据。例如，在 OpenAI API 和 Qwen2.5-7B-Instruct 这样的…...

编程日记 2025/8/14 19:56:35

鸿蒙路由 HMrouter 配置及使用一

1、学习链接 HMRouter地址 https://gitee.com/hadss/hmrouter/blob/dev/HMRouterLibrary/README.md 2、工程配置下载安装 ohpm install hadss/hmrouter 添加编译插件配置在工程目录下的build-profile.json5中，配置useNormalizedOHMUrl属性为true (我这项目创…...

编程日记 2025/8/11 0:08:41

目录

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固定表头表格

📚页面效果

📘组件代码

相关文章：