vue js实现表格行拖拽

效果图:

 

<a-table :dataSource="dataSource" :columns="columns" :pagination="false"><template #bodyCell="{ column, record }"><template v-if="column.key === 'td'"><div style="cursor: pointer;" :draggable="true" @dragstart="dragstart(record, $event)"  @dragenter="dragenter(record, $event)"  @dragend="dragend(record, $event)"><more-outlined /></div></template></template>
</a-table>
const dataSource = ref([{key: '1',name: 'a',age: 1,address: 1,icon: ""},{key: '2',name: 'b',age: 0,address: 2,icon: ""},{key: '3',name: 'c',age: 0,address: 2,icon: ""},{key: '4',name: 'd',age: 0,address: 2,icon: ""},
])const columns = ref([{title: '',dataIndex: 'td',key: 'td'},{title: '名称',dataIndex: 'name',key: 'name',}
])
const oldData = ref(null);
const newData = ref(null);
function dragstart(record, e) {oldData.value = record
}
function dragenter(record, e) {newData.value = record
}
function dragend(record, e) {if (oldData.value !== newData.value) {let oldIndex = dataSource.value.indexOf(oldData.value)let newIndex = dataSource.value.indexOf(newData.value)//将oldIndex下标的数据和newIndex下标的数据在dataSource.value的位置调换一下dataSource.value.splice(oldIndex,1,newData.value);dataSource.value.splice(newIndex,1,oldData.value);}
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【容器起不来~tomcat】

记录一次线上容器~tomcat起不来的场景: **部门由于资金有限,只能用tomcat去部署,话不多说直接贴图: Docker 镜像 Tomcat 启动失败– 查看线上日志,日志报错了,报错内容如下: 1,Error response from daemon: driver failed programming external connectivityon endpoint jen…

R 语言 ggplot2 PCA 主成分分析(虚拟数据集)

生成虚拟数据集 library(ggplot2)data.matrix <- matrix(nrow 100, ncol 10)colnames(data.matrix) <- c(paste("wt",1:5,sep ""),paste("ko",1:5,sep "") )rownames(data.matrix) <- paste("gene",1:100,sep…

Modin 入门学习

Modin 是一个 Python 第三方库&#xff0c;用于加速 Pandas 的 API 执行速度。原始的 Pandas 是单线程执行的&#xff0c;而 Modin 则重新打包了 Pandas 里面的 API&#xff0c;使其同时在多个内核中运行&#xff0c;提高硬件性能的利用率。 使用方法很简单&#xff0c;安装 M…

车载软件架构 —— 闲聊几句AUTOSAR OS(七)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕的就是把别人的眼光当成自己生活的唯一标…

CAD Voronoi 3D三维泰森多边形维诺图插件三维狄利克雷镶嵌(Dirichlet tessellation)

三维Voronoi Voronoi又名泰森多边形或Dirichlet图、维诺图等&#xff0c;三维Voronoi是由连接两邻点直线的垂直平分面组成的连续三维多面体结构。Voronoi在各个学科中应用广泛&#xff0c;如进行区域规划、晶体塑性有限元研究、路径优化、地形简化、多孔结构力学等方面的分析。…

蓝桥杯专题-试题版-【危险系数】【网络寻路】【高僧斗法】【约数倍数选卡片】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

Apollo分布式配置中心(二)

上一篇&#xff1a; 上一篇已经知道Apollo是什么东西了&#xff0c;接下来实践一下 目录 一、创建应用 1、 新增配置 2、创建Namespace ​3、同步配置 4、灰度发布 添加灰度配置项 ​编辑 配置灰度规则 二、删除应用、集群、appNamespace 三、springBoot整合Apollo …

C/C++结构体内存对齐的一些思考

在C中&#xff0c;结构体的内存对齐是为了提高访问结构体成员变量的效率和保证硬件的要求。 结构体对齐 C/C C 结构体内存对齐的示例代码C/C结构体内存对齐的原则结合汇编代码分析结构体的内存对齐问题 C 结构体内存对齐的示例代码 #include <iostream>struct Test_Stru…

C++之GNU C的__attribute__常用属性(一百五十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Symbol.for()

示例&#xff1a;Symbol() 和 Symbol.for(‘ ’)的区别 Symbol.for("foo"); // 创建一个 symbol 并放入 symbol 注册表中&#xff0c;键为 "foo" Symbol.for("foo"); // 从 symbol 注册表中读取键为"foo"的 symbolSymbol.for("b…

ISE软件基本使用

ISE软件基本使用 基本设置 关联notepad的操作&#xff1a;选择notepad的exe文件路径&#xff0c;并且加 { } 符号&#xff0c;并在结尾加$1。ISE可以设置程序运行的速度等级&#xff0c;该速度等级会影响程序从外部SPI Flash启动的启动速度。JTAG 接口的作用是将编译好的程 序…

Docker中安装Nginx

查看可以安装的Nginx版本: docker search nginx 下载最新版本: docker pull nginx :latest 可以省略 运行容器: docker run -itd --name my_nginx -p 80:80 nginx 在主机通过 https://localhost:80或者 http://192.168.40.100:80可以访问 如果之前创…