vue+sortable实现表格拖拽

前言：

支持 vue3.0
支持表格拖拽
支持自定义拖拽
sortable官网

一、下载 sortable

npm install sortablejs --save

二、引入 sortable

import Sortable from “sortablejs”

三、使用

找到自己 ui 框架表格body的class，我这里是 ant-table-tbody
在表格渲染之后执行下方代码

<a-table :columns="tableHead" :data-source="tableData"><div slot="drag"><span class="drag">拖动</span></div>
</a-table>

var el = document.querySelector(".ant-table-tbody");
new Sortable(el, {animation: 200, // 拖动动画handle: ".drag",  // 点击class为drag的容器才拖动forceFallback: true, // 拖动时移动鼠标onEnd: function (evt) {const top = scrollEl.scrollTop;// this.tableData 是我的表格数据this.tableData.splice(evt.newIndex,0,this.tableData.splice(evt.oldIndex, 1)[0]);var newArray = this.tableData.slice(0);this.tableData = [];this.$nextTick(function () {this.tableData = newArray;});},
});

vue+sortable实现表格拖拽相关推荐

sortable vue 排序_vue 使用 sortable 实现 el-table 拖拽排序功能
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import ...
vue 基于elementUI、sortablejs的表格拖拽排序
安装 sortablejs npm install sortablejs template <el-tablerow-key="id":data="moduleCo ...
基于Vue实现表格拖拽排序——sortablejs
表格拖拽排序 1.安装插件 2.页面引入sortablejs 3.准备表格渲染所需的数据 4.绘制表格结构(要绑定唯一的值row-key,不然会出错) 5.完成表格行与列的拖拽排序事件 1.安装插件 ...
Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...
表格拖拽、树状拖拽的各种方法
一.简单的表格拖拽 1.sortablejs 地址:https://www.itxst.com/sortablejs/neuinffi.html 配置项: http://www.sortablejs. ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
jquery实现表格拖拽排序
1.引入:jQuery文件和jquery-ui.js <script src="@{'/public/javascripts/jquery-1.11.1.min.js'}" ...
基于 Spring Boot + Vue 实现的可视化拖拽编辑的大屏项目
大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目: 简介这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑 ...
前端elementui表格拖拽sortablejs避坑，vue2前端表格列拖拽解决方案
sortablejs sortablejs是目前比较多人用的elementui表格拖拽的插件,但是这个插件的bug很不友好:主要bug是拖拽列后不能调整列的宽,处理这个bug只能是不让用户调整列宽. ...

vue+sortable实现表格拖拽

vue+sortable实现表格拖拽

前言：

一、下载 sortable

二、引入 sortable

三、使用

vue+sortable实现表格拖拽相关推荐

最新文章

热门文章