DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例7,TableView16_07 列拖拽排序示例

news2025/4/2 13:33:34

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

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

csdngif标识

目录

  • 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 将成为人工智能领域的领军企业,引领行业的发展潮流,为推动全球人工智能技术的进步做出更大的贡献。

📚页面效果

DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例7,TableView16_07 列拖拽排序示例

📘组件代码

<!-- 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

\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: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2323953.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用idea开发spark程序

新建scala 项目 创建lib目录 将spark jars/ 路径下所有jar 复制到 lib目录 添加依赖 创建scala 程序 package sparkimport org.apache.spark.{SparkConf, SparkContext}object WordCount {def main(args: Array[String]): Unit {val conf new SparkConf().setAppName(&q…

学习日记0327

A cross-domain knowledge tracing model based on graph optimal transport 我们使用gnn来学习这些节点的特征。在此基础上&#xff0c;我们使用显式分布距离度量对齐来自两个不同域的特征向量&#xff0c;旨在最小化域差异&#xff0c;实现最大的跨域知识转移。 AEGOT-CDKT…

CSS学习笔记6——网页布局

目录 一、元素的浮动属性、清除浮动 清除浮动的其他方法 1、使用空标签清除浮动影响 2、使用overflow属性清除浮动 3、使用伪元素清除浮动影响 原理 overflow属性 二、元素的定位 1、相对定位 2、绝对定位 ​编辑 3、固定定位 z-index层叠等级属性 一、元素的浮动…

线程同步——互斥锁

线程同步——互斥锁 目录 一、基本概念 二、打印成对出现的字母 三、生产者消费者&#xff08;有限缓冲问题&#xff09; 3.1 基本概念 3.2 代码实现 一、基本概念 互斥锁是一种用于控制对共享资源访问的同步机制。它确保在同一时间内&#xff0c;只有一个线程可以访问被…

C#实现HTTP服务器:处理文件上传---解析MultipartFormDataContent

完整项目托管地址&#xff1a;https://github.com/sometiny/http HTTP还有重要的一块&#xff1a;文件上传。 这篇文章将详细讲解下&#xff0c;前面实现了同一个链接处理多个请求&#xff0c;为了方便&#xff0c;我们独立写了一个HTTP基类&#xff0c;专门处理HTTP请求。 ht…

leetcoed0044. 通配符匹配 hard

1 题目&#xff1a;通配符匹配 官方难度&#xff1a;难 给你一个输入字符串 (s) 和一个字符模式 ( p ) &#xff0c;请你实现一个支持 ‘?’ 和 ‘*’ 匹配规则的通配符匹配&#xff1a; ‘?’ 可以匹配任何单个字符。 ‘*’ 可以匹配任意字符序列&#xff08;包括空字符序…

蓝桥杯嵌入式第十二届程序设计题

一、题目概览 设计一个小型停车计费系统 二、分模块实现 1、LCD void disp_proc() {if(view0){char text[30];sprintf(text," Data");LCD_DisplayStringLine(Line2,(uint8_t *)text);sprintf(text," CNBR:%d ",Cnum);LCD_DisplayStri…

python多态、静态方法和类方法

目录 一、多态 二、静态方法 三、类方法 一、多态 多态&#xff08;polymorphism&#xff09;是面向对象编程中的一个重要概念&#xff0c;指的是同样的方法调用可以在不同的对象上产生不同的行为。在Python中&#xff0c;多态是通过方法的重写&#xff08;override&#x…

DTMF从2833到inband的方案

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 之前的文章中介绍过通过dialplan拨号计划配置的方法&#xff0c;实现2833到inband的转换&#xff0c;但是实际生产环境中的场景会更复杂&#xff0c;无法预先在dialplan中设置好相关参数和函数。 环境 CentOS 7.9 fr…

在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

在Vue 3 TypeScript Vite 项目中安装和使用 SCSS 1、安装 SCSS 的相关依赖 npm install sass --save-dev2、配置 Vite 对于 Vue 3&#xff0c;Vite 已经内置了对 SCSS 的支持&#xff0c;通常不需要额外的配置。但是&#xff0c;如果需要自定义配置&#xff0c;可以在路径…

Uni-app入门到精通:tabBar节点实现多页面的切换

tabBar节点用于实现多页面的切换。对于一个多tabBar应用&#xff0c;可以通过tabBar节点配置项指定一级导航栏&#xff0c;以及tabBar切换时显示的对应页面。在pages.json中提供tabBar节点配置&#xff0c;不仅是为了方便快速开发导航&#xff0c;更重要的是提示App平台和小程序…

运筹说 第134期 | 矩阵对策的解法

上一期我们了解了矩阵对策的基本理论&#xff0c;包含矩阵对策的纯策略、矩阵对策的混合策略和矩阵对策的基本定理。 接下来小编将为大家介绍矩阵对策的解法&#xff0c;包括图解法、方程组法和线性规划法三种经典方法。 01 图解法 本节首先介绍矩阵对策的图解法&#xff0c;…

3. 轴指令(omron 机器自动化控制器)——>MC_CamOut

机器自动化控制器——第三章 轴指令 15 MC_CamOut变量▶输入变量▶输出变量▶输入输出变量 功能说明▶时序图▶指令的中止▶重启运动指令▶多重启动运动指令▶异常 MC_CamOut 结束通过输入参数指定的轴的凸轮动作 指令名称FB/FUN图形表现ST表现MC_CamOut解除凸轮动作FBMC_Cam…

TF32 与 FP32 的区别

TF32&#xff08;Tensor Float 32&#xff09;与FP32&#xff08;单精度浮点数&#xff09;是两种用于深度学习和高性能计算的浮点格式&#xff0c;其核心区别体现在精度、性能优化和应用场景上。以下是两者的详细对比分析&#xff1a; 一、位宽与结构差异 FP32的位宽结构 FP32…

【大模型】视觉语言模型:Qwen2.5-VL的使用

官方github地址&#xff1a;https://github.com/QwenLM/Qwen2.5-VL 目录 Qwen家族的最新成员&#xff1a;Qwen2.5-VL 主要增强功能 模型架构更新 快速开始 使用Transformers聊天 Docker Qwen家族的最新成员&#xff1a;Qwen2.5-VL 主要增强功能 强大的文档解析功能&am…

测试用例与需求脱节的修复方案

测试用例与需求脱节的问题可通过明确需求定义、加强需求追踪、建立有效沟通机制进行修复。其中&#xff0c;加强需求追踪尤为关键&#xff0c;能确保测试用例与实际需求的精确匹配&#xff0c;避免资源浪费和测试效果不佳。据行业研究&#xff0c;约70%的软件缺陷源于需求管理不…

【Unity】 鼠标拖动物体移动速度跟不上鼠标,会掉落

错误示范&#xff1a; 一开始把移动的代码写到update里去了&#xff0c;发现物体老是掉(总之移动非常不流畅&#xff0c;体验感很差&#xff09; void Update(){Ray ray Camera.main.ScreenPointToRay(Input.mousePosition);if (Physics.Raycast(ray, out RaycastHit hit, M…

VLAN 高级特性

VLAN Access 类型端口&#xff1a;只能属于 1 个 VLAN&#xff0c;发出数据时只能根据 PVID 剥离一个 VLAN Tag 入方向&#xff1a;针对没有 tag 的数据包打上 PVID 的 tag出方向&#xff1a;将 tag 为本接口 PVID 的数据包去掉 tag&#xff0c;发出数据。&#xff08;只有在与…

学习中学习的小tips(主要是学习苍穹外卖的一些学习)

目录 架构的细分 使用实体类来接收配置文件中的值 webMvcConfig类&#xff1a; jwt令牌 管理端的拦截器&#xff1a; JwtProperties&#xff1a; JwtTokenAdminInterceptor &#xff1a; 对密码加密操作 Redis&#xff1a; 分页查询 整体思想 为什么动态 SQL 推荐传实体…

【极速版 -- 大模型入门到进阶】LORA:大模型轻量级微调

文章目录 &#x1f30a; 有没有低成本的方法微调大模型&#xff1f;&#x1f30a; LoRA 的核心思想&#x1f30a; LoRA 的初始化和 r r r 的值设定&#x1f30a; LoRA 实战&#xff1a;LoraConfig参数详解 论文指路&#xff1a;LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE M…