前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
目录
- DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例7,TableView16_07 列拖拽排序示例
-
- 📚前言
- 📚页面效果
-
- 📘组件代码
- 📚代码测试
- 📚测试代码正常跑通,附其他基本代码
-
- 📘编写路由 src\router\index.js
- 📘编写展示入口 src\App.vue
- 📚页面效果
📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始
⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例7,TableView16_07 列拖拽排序示例
📚前言
DeepSeek 将继续秉承创新、开放的理念,不断提升技术实力,拓展应用领域。随着人工智能技术的不断发展,DeepSeek 有望在更多领域发挥重要作用,为人们的生活和工作带来更多的便利和创新。相信在不久的将来,DeepSeek 将成为人工智能领域的领军企业,引领行业的发展潮流,为推动全球人工智能技术的进步做出更大的贡献。
📚页面效果
📘组件代码
<!-- TableView16_07.vue 列拖拽排序示例 -->
<template>
<div class="drag-demo">
<h2>07. 列拖拽排序</h2>
<div class="column-order">
<h3>当前列顺序:</h3>
<div class="column-list">
<div
v-for="(col, index) in columns"
:key="col.dataIndex"
class="column-item"
draggable="true"
@dragstart="handleColumnDragStart(index, $event)"
@dragover.prevent
@drop="handleColumnDrop(index)"
>
{
{ col.title }}
<span class="drag-handle">☰</span>
</div>
</div>
</div>
<Table
:data="taskList"
:columns="columns"
row-key="id"
border
stripe
/>
</div>
</template>
<script setup>
import {
ref } from 'vue'
import Table from '@/components/Table/Table.vue'
const taskList = ref([
{
id: 1, task: '需求分析', owner: '张三', progress: 30, priority: '高' },
{
id: 2, task: 'UI设计', owner: '李四', progress: 60, priority: '中' },
{
id: 3, task: '开发实施', owner: '王五', progress: 45, priority: '高' },
{
id: 4, task: '测试验证', owner: '赵六', progress: 15, priority: '低' },
])
const columns = ref([
{
title: '任务', dataIndex: 'task', width: '200px' },
{
title: '负责人', dataIndex: 'owner', width: '120px' },
{
title: '进度', dataIndex: 'progress', width: '100px' },
{
title: '优先级', dataIndex: 'priority', width: '80px' }
])
// 列拖拽排序相关
const draggedColumnIndex = ref(-1)
const handleColumnDragStart = (index, event) => {
draggedColumnIndex.value = index
event.dataTransfer.effectAllowed = 'move'
}
const handleColumnDrop = (dropIndex) => {
if (draggedColumnIndex.value === -1 || draggedColumnIndex.value === dropIndex) return
// 移动列
const newColumns = [...columns.value]
const [draggedColumn] = newColumns.splice(draggedColumnIndex.value, 1)
newColumns.splice(dropIndex, 0, draggedColumn)
// 更新列顺序
columns.value = newColumns
draggedColumnIndex.value = -1
}
</script>
<style scoped>
.drag-demo {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.column-order {
margin-bottom: 20px;
padding: 15px;
background: #f8f8f8;
border-radius: 4px;
}
.column-order h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
color: #333;
}
.column-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.column-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
cursor: move;
min-width: 80px;
}
.column-item:hover {
background: #f0f0f0;
}
.drag-handle {
margin-left: 8px;
color: #999;
}
</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.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: