DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_09自定义单元格的固定表头表格

devtools/2025/3/17 3:33:12/

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

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

csdngif标识

目录

  • DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_09自定义单元格的固定表头表格
    • 📚页面效果
      • 📘组件代码 \src\views\TableView14_09.vue
    • 📚代码测试
    • 📚测试代码正常跑通,附其他基本代码
      • 📘编写路由 src\router\index.js
      • 📘编写展示入口 src\App.vue
    • 📚页面效果
    • 📚展望


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

DeepSeek__Vue3_TableTable14_09_12">DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_09自定义单元格的固定表头表格

📚页面效果

<a class=DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_09自定义单元格的固定表头表格">

📘组件代码 \src\views\TableView14_09.vue

<!-- TableView14_09.vue 自定义单元格的固定表头表格 -->
<template><div class="table-demo"><h2>9. 添加表头固定功能,自定义单元格的固定表头表格</h2><p class="description">使用具名插槽自定义单元格内容</p><div class="table-container"><Table:data="customers":columns="columns"fixed-headerfixed-header-height="300px"><template #cell-level="{ value }"><span :class="['level-tag', `level-${value.toLowerCase()}`]">{{ value }}</span></template><template #cell-actions="{ row }"><button class="action-btn" @click="handleEdit(row)">编辑</button><button class="action-btn delete" @click="handleDelete(row)">删除</button></template></Table></div></div>
</template><script setup>javascript">
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'const customers = ref([{ id: 1, name: '张三', age: 28, city: '北京', level: '黄金' },{ id: 2, name: '李四', age: 35, city: '上海', level: '白银' },{ id: 3, name: '王五', age: 42, city: '广州', level: '铂金' },{ id: 4, name: '赵六', age: 31, city: '深圳', level: '黄金' },{ id: 5, name: '钱七', age: 29, city: '杭州', level: '白银' }
])const columns = ref([{ title: '姓名', dataIndex: 'name', width: '120px' },{ title: '年龄', dataIndex: 'age', width: '80px' },{ title: '城市', dataIndex: 'city', width: '120px' },{ title: '会员等级', dataIndex: 'level', width: '120px' },{ title: '操作', dataIndex: 'actions', width: '150px' }
])const handleEdit = (row) => {console.log('编辑:', row)
}const handleDelete = (row) => {console.log('删除:', row)
}
</script><style scoped>
.table-demo {padding: 20px;
}.description {margin: 16px 0;color: #666;
}.table-container {border: 1px solid #ebeef5;border-radius: 4px;
}.level-tag {display: inline-block;padding: 2px 8px;border-radius: 4px;font-size: 12px;
}.level-黄金 {background-color: #fdf6ec;color: #e6a23c;
}.level-白银 {background-color: #f4f4f5;color: #909399;
}.level-铂金 {background-color: #ecf5ff;color: #409eff;
}.action-btn {padding: 4px 8px;margin: 0 4px;border: 1px solid #dcdfe6;border-radius: 4px;background: #fff;font-size: 12px;cursor: pointer;
}.action-btn:hover {color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;
}.action-btn.delete:hover {color: #f56c6c;border-color: #fbc4c4;background-color: #fef0f0;
}
</style>

📚代码测试

运行正常

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

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

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

\router\index.js

javascript">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: (

http://www.ppmy.cn/devtools/167724.html

相关文章

在windows10系统上搭建npm仓库源

安装Verdaccio&#xff1a; npm install -g verdaccio 启动verdaccio verdaccio 打开 config.yaml 路径在第一行 config file - C:\Users\huyun\AppData\Roaming\verdaccio\config.yaml 最下面添加一行 listen: 0.0.0.0:4873 另外我们的国内的镜像源一般是使用淘宝镜像…

HTML 新手入门:从零基础到搭建第一个静态页面(二)

构建第一个静态页面 &#xff08;一&#xff09;规划页面结构 在开始编写代码之前&#xff0c;我们需要先规划好页面的结构。这就好比在建造房屋之前&#xff0c;需要先设计好房屋的布局一样。思考一下你希望页面展示哪些内容&#xff0c;比如是一篇文章、一组图片&#xff0…

2011-2020年 全国省市县-数字普惠金融指数数字经济指数绿色金融指数县域数字乡村指数

2011-2020 全国省市县-数字普惠金融指数&数字经济指数&绿色金融指数&县域数字乡村指数https://download.csdn.net/download/2401_84585615/90214687 https://download.csdn.net/download/2401_84585615/90214687 在2011年至2020年期间&#xff0c;中国各省、市、县…

故障诊断——neo4j入门

文章目录 neo4jQuickStartDemo neo4j QuickStart 详情可见博客&#xff1a;https://www.cnblogs.com/nhdlb/p/18703804&#xff0c;使用docker拉取最近的一个版本进行创建 docker run -it -d -p 7474:7474 -p 7687:7687 \ -v /disk5/neo4j_docker/data:/data \ -v /disk5/ne…

多线程程序的测试和调试_第11章_《C++并发编程实战》笔记

多线程程序的测试和调试 1. 并发相关Bug的核心类型1.1 数据竞争&#xff08;Data Race&#xff09; 1.2 死锁&#xff08;Deadlock&#xff09;1.3 活锁&#xff08;Livelock&#xff09; 2. 定位并发Bug的技巧3. 代码优化与修复示例3.1 修复数据竞争&#xff08;使用原子操作&…

在 Ubuntu 下通过 Docker 部署 Nginx 服务器

Docker 和 Nginx 简介 Docker 是一个开源的容器化平台&#xff0c;能够让你以轻量级的方式打包、分发和运行应用。想象一下&#xff0c;你的应用就像一个快递包裹&#xff0c;Docker 确保它在任何地方都能完好无损地到达。它的隔离性和便携性让开发者们爱不释手。而 Nginx 则是…

Flutter_学习记录_video_player、chewie 播放视频

1. video_player 视频播放 插件地址&#xff1a;https://pub.dev/packages/video_player 添加插件 导入头文件 import package:video_player/video_player.dart;Android配置&#xff08;iOS不用配置&#xff09; 修改这个文件&#xff1a;/android/app/src/main/AndroidMani…

RabbitMQ入门:从安装到高级消息模式

文章目录 一. RabbitMQ概述1.1 同步/异步1.1.1 同步调用1.1.2 异步调用 1.2 消息中间件1.2.1 概念1.2.2 作用1.2.3 常见的消息中间件1.2.4 其他中间件 1.3 RabbitMQ1.3.1 简介1.3.2 特点1.3.3 方式1.3.4 架构1.3.5 运行流程 二. 安装2.1 Docker 安装 RabbitMQ 三. 简单队列&…