1、定义好拖拽元素 ref标识,以及 row-key="id"  (row-key拖拽标识,拖拽后数据不会乱, id为tableDataNew数据对象id)

2、下载cnpm install sortablejs --save 插件,并引入 import Sortable from 'sortablejs'

3、nextTixk触发

this.$nextTick(() => {
     this.rowDrop();
})
4、行拖拽
rowDrop() {
            const tbody = this.$refs.manufacturing.$el.querySelector(
                ".el-table__body-wrapper > table > tbody"
            );
            const _this = this;
            Sortable.create(tbody, {
                onEnd({ newIndex, oldIndex }) {
                    const currRow = _this.tableDataNew.splice(oldIndex, 1)[0];
                    _this.tableDataNew.splice(newIndex, 0, currRow);
                },
            });
        },

vue2+element表格拖拽的更多相关文章

  1. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  2. react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序)

    表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...

  3. 实现Bootstrap表格拖拽

    实现Bootstrap表格拖拽: 需要引入jquery.min.js.bootstrap相关文件,以及jquery.dragsort-0.5.2.js 代码如下: <html> <h ...

  4. Vue. 之 Element dialog 拖拽

    Vue. 之 Element dialog 拖拽 默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新 ...

  5. 根据HTML5的新方法 drag & drop 方法实现表格拖拽实例

    上一次学习了html5的drag和drop方法,传送门  就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...

  6. js表格拖拽

    html部分 <div id="chenkbox"> <div id="tableSort"> <ol> <li> ...

  7. 基于Vue实现可以拖拽的树形表格(原创)

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...

  8. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  9. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  10. 自由拖拽DIV实现

    最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...

随机推荐

  1. 无法加载文件 D:\lunwen\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。visual code页面vue ui启动失败

    报如下错误 解决方法: 1.以管理员身份运行 Windows PowerShell(管理员)点击win键 搜索powershell 点击以管理员身份运行 如下图所示 2.输入 set-Executio ...

  2. Carthage 使用介绍

    1.安装 Carthage 安装 brew install carthage 检测当前版本 carthage version 升级至最新版本 brew upgrade carthage 2.如果更新出 ...

  3. Leetcode48 旋转图像

    48. 旋转图像 难度中等432 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵 ...

  4. java 类对象四种方法加载方式

    public static void main(String[] args) throws Exception { //第一种 //这里需要做异常处理,或的加载类的类对象类. Class<?&g ...

  5. Delphi线程中使用waitfor返回值

    使用waitfor的时候就不要再设置Freeonterminated属性了,否则会提示线程句柄错误.主要是里面使用了ExitThread方法,当线程方法执行完毕后会自动释放线程的.不过记得要重写Des ...

  6. .NET CORE 下收发邮件之 MAILKIT

    背景 利用代码发送邮件在工作中还是比较常见的,相信大家都用过SmtpClient来处理发送邮件的操作,不过这个类以及被标记已过时,所以介绍一个微软推荐的库MailKit来处理. MailKit开源地址 ...

  7. 3.17阿里Java后端,电商 sku 的全排列算法

    3.17阿里Java后端 字典 有英文字典:Map<Character, String[]>,示例如下: a : [a, an] b : [bus, bird] c : [car, can ...

  8. elementUI table 数组中各项加逗号隔开

    js处理 //this.newTableData 数组 this.newTableData.map((item,index)=>{ //item.label 数组 if(item.label){ ...

  9. Windows开机自动运行.bat文件

    方法/步骤:一:打开我的电脑, 在地址栏输入:"C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup" 二,把自 ...

  10. Django基础篇 07-Django后端和html交互

    一.上下文管理器 context_processors 执行顺序是 先执行views.py中代码,在views返回之前在走到TEMPLATES.OPTIONS.context_processors的方 ...