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

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例1，TableView16_01.vue 基础行拖拽排序示例

news 来源：原创 2025/7/27 19:32:20

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

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

csdngif标识

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例1，TableView16_01.vue 基础行拖拽排序示例
- 📚前言
- 📚页面效果
- - 📘组件代码
- 📚代码测试
- 📚测试代码正常跑通，附其他基本代码
- - 📘编写路由 src\router\index.js
  - 📘编写展示入口 src\App.vue
- 📚页面效果

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

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例1，TableView16_01.vue 基础行拖拽排序示例

📚前言

2023 年 11 月 29 日，DeepSeek 再次发力，推出参数规模达 670 亿的通用大模型 DeepSeek LLM，包括 7B 和 67B 的 base 及 chat 版本。这一模型的发布，进一步展示了 DeepSeek 在大语言模型领域的技术实力和创新能力。DeepSeek LLM 基于 Transformer 架构，通过对大量文本数据的学习和训练，具备了强大的语言理解和生成能力。它能够理解人类语言的语义和语境，回答各种复杂的问题，生成自然流畅的文本，在智能客服、智能写作、知识问答等多个领域都有着广泛的应用前景。在智能客服场景中，DeepSeek LLM 能够快速理解用户的问题，并提供准确、详细的回答，有效提升了客户服务的效率和质量。

📚页面效果

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例1，TableView16_01.vue 基础行拖拽排序示例

📘组件代码

<!-- TableView16_01.vue 基础行拖拽排序示例 -->
<template><div class="drag-demo"><h2>01. 基础行拖拽排序</h2><Table:data="taskList":columns="columns"draggable@update:data="handleDataUpdate"row-key="id"borderstripe/></div>
</template><script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'const taskList = ref([{ id: 1, task: '需求分析', priority: '高', status: '进行中' },{ id: 2, task: 'UI设计', priority: '中', status: '未开始' },{ id: 3, task: '前端开发', priority: '紧急', status: '已完成' },{ id: 4, task: '后端接口', priority: '高', status: '进行中' },
])const columns = [{ title: '任务', dataIndex: 'task', width: '200px' },{ title: '优先级', dataIndex: 'priority', width: '100px' },{ title: '状态', dataIndex: 'status', width: '120px' }
]const handleDataUpdate = (newData) => {taskList.value = newDataconsole.log('当前任务顺序:', taskList.value.map(t => t.id))
}
</script><style scoped>
.drag-demo {padding: 20px;max-width: 800px;margin: 0 auto;
}
</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.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: () => import('../views/TabsView.vue'),},{path: '/accordion',name: 'accordion',// 折叠面板（Accordion）component: () => import('../views/AccordionView.vue'),},{path: '/timeline',name: 'timeline',// 时间线（Timeline）component: () => import('../views/TimelineView.vue'),},{path: '/backToTop',name: 'backToTop',component: () => import('../views/BackToTopView.vue')},{path: '/notification',name: 'notification',component: () => import('../views/NotificationView.vue')},{path: '/card',name: 'card',component: () => import('../views/CardView.vue')},{path: '/infiniteScroll',name: 'infiniteScroll',component: () => import('../views/InfiniteScrollView.vue')},{path: '/switch',name: 'switch',component: () => import('../views/SwitchView.vue')},{path: '/sidebar',name: 'sidebar',component: () => import('../views/SidebarView.vue')},{path: '/breadcrumbs',name: 'breadcrumbs',component: () => import('../views/BreadcrumbsView.vue')},{path: '/masonryLayout',name: 'masonryLayout',component: () => import('../views/MasonryLayoutView.vue')},{path: '/rating',name: 'rating',component: () => import('../views/RatingView.vue')},{path: '/datePicker',name: 'datePicker',component: () => import('../views/DatePickerView.vue')},{path: '/colorPicker',name: 'colorPicker',component: () => import('../views/ColorPickerView.vue')},{path: '/rightClickMenu',name: 'rightClickMenu',component: RightClickMenuView},{path: '/rangePicker',name: 'rangePicker',component: () => import('../views/RangePickerView.vue')},{path: '/navbar',name: 'navbar',component: () => import('../views/NavbarView.vue')},{path: '/formValidation',name: 'formValidation',component: () => import('../views/FormValidationView.vue')},{path: '/copyToClipboard',name: 'copyToClipboard',component: () => import('../views/CopyToClipboardView.vue'

目录

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例1，TableView16_01.vue 基础行拖拽排序示例

📚前言

📚页面效果

📘组件代码

📚代码测试

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

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

相关文章：