您的位置:首页 > 游戏 > 游戏 > 免费wap网站推荐_上海猎头公司电话_链接生成二维码_网上在线看视频为什么卡

免费wap网站推荐_上海猎头公司电话_链接生成二维码_网上在线看视频为什么卡

2025/3/18 1:11:04 来源:https://blog.csdn.net/qq_33650655/article/details/146162201  浏览:    关键词:免费wap网站推荐_上海猎头公司电话_链接生成二维码_网上在线看视频为什么卡
免费wap网站推荐_上海猎头公司电话_链接生成二维码_网上在线看视频为什么卡

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

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

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<

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com