vue表格拖拽使用Sortable插件库
1 <template >
2 <el-table
3 row-key="name"
4 :data="tableData"
5 stripe style="width:100%;">
6 <el-table-column prop="name" label="测试"></el-table-column>
7 </el-table>
8 </template>
9
10 <script>
11 import Sortable from 'sortablejs'
12
13 export default {
14 data() {
15 return {
16 tableData: [
17 {
18 name: '凯小默111'
19 },
20 {
21 name: '凯小默222'
22 },
23 {
24 name: '凯小默333'
25 },
26 {
27 name: '凯小默444'
28 },
29 {
30 name: '凯小默555'
31 }
32 ]
33 }
34 },
35 mounted() {
36 //使每次都可以拖拽
37 this.$nextTick(()=>{
38 setTimeout(()=>{
39 this.rowDrop();
40 },100)
41 })
42 },
43 methods: {
44 //行拖拽
45 rowDrop() {
46 const tbody = document.querySelector('.el-table__body-wrapper tbody')
47 Sortable.create(tbody, {
48 onEnd:({ newIndex, oldIndex })=> {
49 const currRow = this.tableData.splice(oldIndex, 1)[0];
50 this.tableData.splice(newIndex, 0, currRow);
51 console.log(this.tableData);
52 }
53 })
54 },
55 }
56 }
57 </script>
如果碰到了火狐浏览器拖动会在新窗口打开并去百度进行搜索等问题,如下解决方式:
mounted() {
document.body.ondrop = function (event) {
event.preventDefault()
event.stopPropagation()
}
vue表格拖拽使用Sortable插件库的更多相关文章
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序)
表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
- 实现Bootstrap表格拖拽
实现Bootstrap表格拖拽: 需要引入jquery.min.js.bootstrap相关文件,以及jquery.dragsort-0.5.2.js 代码如下: <html> <h ...
- 基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...
- vue内容拖拽放大缩小
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自制一个H5图片拖拽、裁剪插件(原生JS)
前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...
- Vue实现拖拽穿梭框功能四种方式
一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
随机推荐
- nvm node 版本管理
nvm安装与使用 1.nvm是什么 nvm全名node.js version management,顾名思义是一个nodejs的版本管理工具.通过它可以安装和切换不同版本的nodejs.下面列出下载. ...
- 批处理命令for循环(cmd命令)
记录一下: https://www.cnblogs.com/Braveliu/p/5081087.html
- UE4常用快捷键
编辑器快捷键 按键 操作 W 选择"移动"工具 E 选择"旋转"工具 R 选择"缩放"工具 F 聚焦对象 End 落到地面 Alt + En ...
- vue高级进阶( 一 ) 组件精髓概述
前言 这个系列可能会分为几部分: 基础以及高级用法总结 一些比较有代表性的实战 源码解析(一定是用最粗俗,不对,是最通俗的语言讲解,这个我可以保证) 总之一定对得起高级进阶这几个字... 组件分类 v ...
- https原理(四)双向实践(java客户端+tcp代理)
本文采用客户端与服务端共用一个密钥对 1 将https代理服务器(三)实践中的mkcert p12分解为一个公钥一个私钥 mac@macdeMacBook mkcert % openssl pkcs1 ...
- 【vue】Vue-router
Vue-router 安装 npm install vue-router --save-dev vue-cli中已经选择安装了vue-router,那这里不需要重复安装了 解读route 路径```s ...
- Dynamics CRM 安全模型的性能问题
性能问题对系统的影响可以是致命性的,一旦不重视,在不久的将来随时可能爆发,导致系统卡顿甚至无法操作,即时重启也无济于事:甚至极其难以发现.这里为自己记录一下过往的经验.系统一开始的设计,很大程度上决定 ...
- Idea下载指南之几个选项
通常我们在下载idea等一些图形编译器时,都会有很多选项供您选择,下面我们来看下这几个英文选项吧. create desktop Shortcut Update Path variable(resta ...
- unity tex2Dlod in vert
https://forum.unity.com/threads/how-to-sample-a-texture-in-vertex-shader.513816/ GreatWall said: ↑ ...
- Python中用eval将字符串转换为字典时候出错:NameError: name ‘null’ is not defined的解决方法
这两天在用python调用接口时,因为接口返回的是str类型的数据,形如: 因为这样的str类似字典,所以我想把它转为字典以便处理,使用的是eval来进行转换,如下: <pre name=& ...