DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_11多功能组合的固定表头表格
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
目录
- DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_11多功能组合的固定表头表格
-
- 📚页面效果
-
- 📘组件代码
- 📚代码测试
- 📚测试代码正常跑通,附其他基本代码
-
- 📘编写路由 src\router\index.js
- 📘编写展示入口 src\App.vue
- 📚页面效果
- 📚展望
📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始
⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_11多功能组合的固定表头表格
📚页面效果
📘组件代码
<!-- TableView14_11.vue 多功能组合的固定表头表格 -->
<template>
<div class="table-demo">
<h2>11. 添加表头固定功能,多功能组合的固定表头表格</h2>
<p class="description">组合使用多个表格功能</p>
<div class="table-container">
<Table
:data="filteredData"
:columns="columns"
fixed-header
fixed-header-height="300px"
border
stripe
show-search
:search-value="searchKeyword"
@search="handleSearch"
row-selection
:selected-rows="selectedRows"
pagination
:current-page="currentPage"
:page-size="5"
@update:selectedRows="handleSelectionChange"
@update:currentPage="handlePageChange"
/>
<div class="selection-info" v-if="selectedRows.length">
已选择 {
{ selectedRows.length }} 项
</div>
</div>
</div>
</template>
<script setup>
import {
ref, computed } 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: '白银' },
{
id: 6, name: '孙八', age: 45, city: '成都', level: '钻石' },
{
id: 7, name: '周九', age: 33, city: '武汉', level: '黄金' },
{
id: 8, name: '吴十', age: 38, city: '南京', level: '铂金' }
])
const searchKeyword = ref('')
// 根据搜索关键字过滤数据
const filteredData = computed(() => {
if (!searchKeyword.value) return customers.value
const keyword = searchKeyword.value.toLowerCase()
return customers.value.filter(item => {
return Object.values(item).some(value =>
String(value).toLowerCase().includes(keyword)
)
})
})
const columns = ref([
{
title: '姓名', dataIndex: 'name', width: '120px' },
{
title: '年龄', dataIndex: 'age', width: '80px' },
{
title: '城市', dataIndex: 'city', width: '120px' },
{
title: '会员等级', dataIndex: 'level', width: '120px' }
])
const selectedRows = ref([])
const currentPage = ref(1)
const handleSelectionChange = (rows) => {
selectedRows.value = rows
}
const handlePageChange = (page) => {
currentPage.value = page
}
// 处理搜索
const handleSearch = (keyword) => {
searchKeyword.value = keyword
// 重置页码
currentPage.value = 1
}
</script>
<style scoped>
.table-demo {
padding: 20px;
}
.description {
margin: 16px 0;
color: #666;
}
.table-container {
border: 1px solid #ebeef5;
border-radius: 4px;
}
.selection-info {
margin-top: 16px;
padding: 8px;
background-color: #f5f7fa;
}
/* 优化搜索框样式 */
:deep(.table-search) {
margin-bottom: 16px;
}
:deep(.search-input) {
width: 200px;
padding: 8px 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
}
:deep(.search-input:focus) {
outline: none;
border-color: #409eff;
}
</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