el-table拖拽表格

1、拖拽插件安装

npm i -S vuedraggable
// vuedraggable依赖Sortable.js,我们可以直接引入Sortable使用Sortable的特性。
// vuedraggable是Sortable的一种加强,实现组件化的思想,可以结合Vue,使用起来更方便。

2、引入拖拽函数

import Sortable from 'sortablejs' //(1)引入拖拽函数mounted() {this.rowDrop() //(2)组件创建时执行拖拽方法},// (3)拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count2 .el-table__body-wrapper tbody');const that = this;new Sortable(el, {animation: 150,handle: '.handle_drop', //class类名执行事件ghostClass: 'blue-background-class',// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容;(此处表示获取删除项对象) */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据, 第二个参数 0 表示不删除,即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },});},

3、el-table指定点拖拽(完整代码)

<template><div class="content"><el-table :data="tableData" id="table_count2" class="table-box" stripe border style="width: 100%;" size="mini"@selection-change="handleSelectionChange" row-key="id"><el-table-column type="selection" width="50" :reserve-selection="true" align="center"fixed="left"></el-table-column><el-table-column label="序号" align="center" width="50" fixed><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="date" label="日期" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center" width="210"></el-table-column><el-table-column label="操作" width="150" align="center"><template slot-scope="scope"><el-tooltip content="复制" placement="top"><el-button type="success" plain circle size="mini"@click.stop="handleCopy(scope.row, scope.$index)"><i class="el-icon-box"></i></el-button></el-tooltip><el-tooltip content="删除" placement="top"><el-button type="danger" plain circle size="mini"@click.stop="handleDelete(scope.row, scope.$index)"><i class="el-icon-delete"></i></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="长按拖动排序" placement="top"><el-button type="info" plain circle size="mini"><i class="el-icon-rank handle_drop" style="font-size: 14px;"></i></el-button></el-tooltip></template></el-table-column></el-table></div>
</template><script>
import Sortable from 'sortablejs' //(1)引入拖拽函数
export default {name: "TableBase3",components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: '2016-05-01',name: '王小虎1',address: '上海市普陀区金沙江路 1510 弄'}, {id: 2,date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1511 弄'}, {id: 3,date: '2016-05-03',name: '王小虎3',address: '上海市普陀区金沙江路 1512 弄'}, {id: 4,date: '2016-05-04',name: '王小虎4',address: '上海市普陀区金沙江路 1513 弄'}]}},created() { },mounted() {this.rowDrop() //(2)组件创建时执行拖拽方法},methods: {// (3)拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count2 .el-table__body-wrapper tbody');const that = this;new Sortable(el, {animation: 150,handle: '.handle_drop', //class类名执行事件ghostClass: 'blue-background-class',// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容;(此处表示获取删除项对象) */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据, 第二个参数 0 表示不删除,即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },});},//多选handleSelectionChange(val) {console.log('----多选  multipleSelection---', val)this.multipleSelection = val;},//复制handleCopy(row, rowIndex) {let newList = [...this.tableData]let newRow = { ...row }newRow['id'] = newList.length + 1newRow['name'] = newRow['name'] + "-" + newList.length + 1newList.push(newRow)this.tableData = [...newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm('是否确认删除此项?', {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.tableData.splice(rowIndex, 1)}).catch(() => { });}},
};
</script><style  lang="scss" scoped>
::v-deep {/**el-table表格调整 start*/.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table--mini .el-table__cell {padding: 2px;flex: 1;}/**el-table表格调整 end */
}
</style>

4、el-table整行拖拽(完整代码)

<template><div class="content"><el-table :data="tableData" id="table_count"  class="table-box" stripe border style="width: 100%;" size="mini"@selection-change="handleSelectionChange" row-key="id"><el-table-column type="selection" width="50" :reserve-selection="true" align="center"fixed="left"></el-table-column><el-table-column label="序号" align="center" width="50" fixed><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="date" label="日期" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center" width="210"></el-table-column><el-table-column label="操作" width="100" align="center" fixed="right"><template slot-scope="scope"><el-tooltip content="复制" placement="top"><el-button type="success" plain circle size="mini"@click.stop="handleCopy(scope.row, scope.$index)"><i class="el-icon-box"></i></el-button></el-tooltip><el-tooltip content="删除" placement="top"><el-button type="danger" plain circle size="mini"@click.stop="handleDelete(scope.row, scope.$index)"><i class="el-icon-delete"></i></el-button></el-tooltip></template></el-table-column></el-table></div>
</template><script>
import Sortable from 'sortablejs' //(1)引入拖拽函数
export default {name: "TableBase2",components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: '2016-05-01',name: '王小虎1',address: '上海市普陀区金沙江路 1510 弄'}, {id: 2,date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1511 弄'}, {id: 3,date: '2016-05-03',name: '王小虎3',address: '上海市普陀区金沙江路 1512 弄'}, {id: 4,date: '2016-05-04',name: '王小虎4',address: '上海市普陀区金沙江路 1513 弄'}]}},created() { },mounted() {this.rowDrop() //(2)组件创建时执行拖拽方法},methods: {// (3)拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count .el-table__body-wrapper tbody');const that = this;Sortable.create(el, {// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容;(此处表示获取删除项对象) */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据, 第二个参数 0 表示不删除,即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },})},//多选handleSelectionChange(val) {console.log('----多选  multipleSelection---', val)this.multipleSelection = val;},//复制handleCopy(row, rowIndex) {let newList = [...this.tableData]let newRow = { ...row }newRow['id'] = newList.length + 1newRow['name'] = newRow['name'] +"-"+ newList.length + 1newList.push(newRow)this.tableData = [...newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm('是否确认删除此项?', {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.tableData.splice(rowIndex, 1)}).catch(() => { });}},
};
</script><style  lang="scss" scoped>
::v-deep {/**el-table表格调整 start*/.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table--mini .el-table__cell {padding: 2px;flex: 1;}/**el-table表格调整 end */
}
</style>

5、自定义ul li 行拖拽(完整代码--复制即用)

<template><div class="content"><ul id="table_count2"><!-- 注意 key必须是唯一的id, 如果用index就可能导致渲染错误问题 --><li class="table_li" v-for="(item,index) in tableData" :key="'tli_'+item.id">         <span>{{ item.name  }}</span><i class="el-icon-rank handle_drop" style="font-size: 14px;"></i></li></ul></div>
</template><script>
import Sortable from 'sortablejs' //(1)引入拖拽函数
export default {name: "TableBase3",components: {},data() {return {tableData: [{id: 1,date: '2016-05-01',name: '王小虎1',address: '上海市普陀区金沙江路 1510 弄'}, {id: 2,date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1511 弄'}, {id: 3,date: '2016-05-03',name: '王小虎3',address: '上海市普陀区金沙江路 1512 弄'}, {id: 4,date: '2016-05-04',name: '王小虎4',address: '上海市普陀区金沙江路 1513 弄'}]}},created() { },mounted() {this.rowDrop() //(2)组件创建时执行拖拽方法},methods: {// (3)拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count2');const that = this;new Sortable(el, {animation: 150,handle: '.handle_drop', //class类名执行事件ghostClass: 'blue-background-class',// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容;(此处表示获取删除项对象) */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据, 第二个参数 0 表示不删除,即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },});},},
};
</script><style  lang="scss" scoped>.table_li{width: 500px;padding: 10px;border: 1px solid orange;border-radius: 5px;margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between;
}
</style>
  • 相关文档:Element UI table表格行拖动排序_element表格拖拽改变顺序-CSDN博客

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

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

相关文章

深入理解 Android 中的 KeyguardManager

深入理解 Android 中的 KeyguardManager 引言 在 Android 系统中&#xff0c;KeyguardManager 是一个重要的系统服务&#xff0c;负责管理设备的锁屏界面&#xff08;Keyguard&#xff09;。锁屏界面是设备安全性的第一道防线&#xff0c;用于防止未经授权的用户访问设备。Ke…

Transformer 和 Attention机制入门

1. 什么是 Transformer 背景&#xff1a; 在自然语言处理领域&#xff0c;早期常使用循环神经网络&#xff08;RNN&#xff09;及其变体&#xff08;如 LSTM、GRU&#xff09;来处理序列数据&#xff0c;如机器翻译、文本生成等任务。然而&#xff0c;RNN 结构存在以下问题&…

Unity学习笔记(七)使用状态机重构角色攻击

前言 本文为Udemy课程The Ultimate Guide to Creating an RPG Game in Unity学习笔记 攻击状态重构 首先我们重构攻击状态的动画 之前的动画&#xff0c;我们是使用状态(isAttacking)攻击次数(comboCounter)完成动画的过渡&#xff0c;这样虽然能完成功能&#xff0c;但是如…

Windows10环境下安装RabbitMq折腾记

最近有个老项目需要迁移到windows10环境&#xff0c;用的是比较老的rabbitmq安装包&#xff0c;如下所示。经过一番折腾&#xff0c;死活服务起不来&#xff0c;最终果断放弃老版本启用新版本。现在把折腾过程记录下&#xff1a; 一、安装erlang 安装完成后的目录结构&#xff…

Three.js 基础概念:构建3D世界的核心要素

文章目录 前言一、场景&#xff08;Scene&#xff09;二、相机&#xff08;Camera&#xff09;三、渲染器&#xff08;Renderer&#xff09;四、物体&#xff08;Object&#xff09;五、材质&#xff08;Material&#xff09;六、几何体&#xff08;Geometry&#xff09;七、光…

了解RabbitMQ中的Exchange:深入解析与实践应用

在分布式系统设计中&#xff0c;消息队列&#xff08;Message Queue&#xff09;扮演着至关重要的角色&#xff0c;而RabbitMQ作为开源消息代理软件的佼佼者&#xff0c;以其高性能、高可用性和丰富的功能特性&#xff0c;成为了众多开发者的首选。在RabbitMQ的核心组件中&…

分布式主键ID生成方式-snowflake雪花算法

这里写自定义目录标题 一、业务场景二、技术选型1、UUID方案2、Leaf方案-美团&#xff08;基于数据库自增id&#xff09;3、Snowflake雪花算法方案 总结 一、业务场景 大量的业务数据需要保存到数据库中&#xff0c;原来的单库单表的方式扛不住大数据量、高并发&#xff0c;需…

Linux 系统搭建网络传输环境汇总

Ubuntu 系统搭建 TFTP 服务器 1. 创建 /home/username/workspace/tftp 目录并赋予最大权限&#xff0c;username 是自己用户名 sudo mkdir -p /home/username/workspace/tftp sudo chmod 777 /home/username/workspace/tftp 2. 安装 tftp-hpa&#xff08; 客户端软件包&#x…

洛谷:P1540 [NOIP2010 提高组] 机器翻译

[NOIP2010 提高组] 机器翻译 题目背景 NOIP2010 提高组 T1 题目描述 小晨的电脑上安装了一个机器翻译软件&#xff0c;他经常用这个软件来翻译英语文章。 这个翻译软件的原理很简单&#xff0c;它只是从头到尾&#xff0c;依次将每个英文单词用对应的中文含义来替换。对于…

“AI智慧语言训练系统:让语言学习变得更简单有趣

大家好&#xff0c;我是你们的老朋友&#xff0c;一个热衷于探讨科技与教育结合的产品经理。今天&#xff0c;我想和大家聊聊一个让语言学习变得不再头疼的话题——AI智慧语言训练系统。这个系统可是我们语言学习者的福音&#xff0c;让我们一起来揭开它的神秘面纱吧&#xff0…

线性代数考研笔记

行列式 背景 分子行列式&#xff1a;求哪个未知数&#xff0c;就把b1&#xff0c;b2放在对应的位置 分母行列式&#xff1a;系数对应写即可 全排列与逆序数 1 3 2&#xff1a;逆序数为1 奇排列 1 2 3&#xff1a;逆序数为0 偶排列 将 1 3 2 只需将3 2交换1次就可以还原原…

什么是 ES6 “模板语法” ?

ES6 提出了“模板语法”的概念。在 ES6 以前&#xff0c;拼接字符串是很麻烦的事情 var name css var career coder! var hobby [coding ,"writing] var finalString my name is name &#xff0c;I work as a career I love hobby[0] and hobby[1]仅仅几…

ffmpeg 命令行 重置音频或视频的时间戳

ffmpeg -i E:/1/22-.mp4 -ss 11:0 -t 1:0 -vf setptsN/FRAME_RATE/TB -af asetptsN/SR/TB -c copy E:/1/2-.mp4 &#xff1a;重置音频和视频的时间戳。 -vf setptsN/FRAME_RATE/TB &#xff1a;重置视频时间戳。vf是video filter的缩写。N/FRAME_RATE/TB 中的N表示第N帧&#…

精选2款.NET开源的博客系统

前言 博客系统是一个便于用户创建、管理和分享博客内容的在线平台&#xff0c;今天大姚给大家分享2款.NET开源的博客系统。 StarBlog StarBlog是一个支持Markdown导入的开源博客系统&#xff0c;后端基于最新的.Net6和Asp.Net Core框架&#xff0c;遵循RESTFul接口规范&…

关于FPGA中添加FIR IP核(采用了GOWIN EDA)

文章目录 前言一、IP核二、MATLAB文件三、导出系数COE文件1.设计滤波器2.用官方的matlab代码或者直接用文本文件 四、进行模块化设计源文件 前言 FIR滤波器的特点是其输出信号是输入信号的加权和&#xff0c;权值由滤波器的系数决定。每个系数代表了滤波器在特定延迟位置上的“…

Flutter Web 选取并上传图片

选取图片 /// 选取图片void pickImage() async {final input html.FileUploadInputElement();// 单选input.multiple false;input.accept image/*;// 显示文件选择对话框html.document.body?.append(input);input.click();await input.onChange.first;// 获取选中的文件列表…

51单片机——中断(重点)

学习51单片机的重点及难点主要有中断、定时器、串口等内容&#xff0c;这部分内容一定要认真掌握&#xff0c;这部分没有学好就不能说学会了51单片机 1、中断系统 1.1 概念 中断是为使单片机具有对外部或内部随机发生的事件实时处理而设置的&#xff0c;中断功能的存在&#…

VVenC 编码器源码结构与接口函数介绍

VVenC VVenC&#xff08;Fraunhofer Versatile Video Encoder&#xff09;是由德国弗劳恩霍夫海因里希研究所&#xff08;Fraunhofer Heinrich Hertz Institute, HHI&#xff09;开发的一个开源的高效视频编码器。它实现了最新的视频编码标准——Versatile Video Coding (VVC)…

耗时一天,我用AI开发了AI小程序

小码哥从事前后端开发近十年&#xff0c;但是随着技术的更新迭代&#xff0c;有时候没有时间和精力去优化UI、实现一些前后端功能&#xff0c;以及解决一些bug。特别是我想开发小码哥AI的移动端&#xff0c;但觉得自己没有那么多时间去研究移动端了&#xff0c;准备放弃了&…

C#中的关键字out和ref的区别

目录 一、out 二、ref 三、拓展 一、out 在 C# 中&#xff0c;out 是一个关键字&#xff0c;通常用于方法参数&#xff0c;表示该参数是输出参数。使用 out 关键字的参数要求在方法内部必须被赋值&#xff0c;而这个参数的值会在方法返回时传递给调用者。可以理解为&#xf…