当前位置: 首页 > article >正文

DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_11多功能组合的固定表头表格

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

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

csdngif标识

目录

  • 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多功能组合的固定表头表格

📚页面效果

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

\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

http://www.kler.cn/a/586586.html

相关文章:

  • 绿色高效运维:分布式光伏监控系统的全生命周期管理
  • 文件系统 linux ─── 第19课
  • 新手村:统计量均值、中位数、标准差、四分位数
  • 将pdf或者word转换成base64格式
  • 通达信软件+条件选股+code
  • 如何在github上参与开源项目
  • Java基础语法练习43(线程)
  • 网络实验操作-VLAN
  • lws-minimal-ws-server前端分析
  • 考研数学复习误区:如何避免无效学习?
  • 3.4 基于TSX的渲染函数类型安全实践
  • Julia语言的饼图
  • Java常见的几种内存溢出及解决方法
  • BSides-Vancouver-2018 ftp匿名访问、hydra爆破22端口、nc瑞士军刀、提权
  • C++类对象创建全解析:从构造函数到内存管理
  • SQL Server语法实战指南:核心语法、注意事项与高频问题解析
  • Java基础-List、Set、Map
  • MATLAB中enumeration函数用法
  • 【FPGA实战】Verilog实现DE2-115的流水灯控制
  • 四、Jmeter工具接口脚本编写