sortable+element 实现表格行拖拽的方法示例


Posted in Javascript onJune 07, 2019

背景

1、vue项目中的表格需要实现行拖拽功能

2、表格使用element组件库中el-table

方案介绍

Sortable.js

介绍:Sortable.js是一款轻量级的拖放排序列表的js插件

引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.

参考地址: https://github.com/SortableJS/Sortable

vuedraggable
介绍:基于Sortable.js的vue组件,用以实现拖拽功能

引用自官方文档:Vue drag-and-drop component based on Sortable.js

参考地址: https://github.com/SortableJS/Vue.Draggable

遇到的问题
在使用vuedraggable的过程中,发现必须用<draggable></draggable>包裹拖动项的父级元素,但是element组件库对table进行封装,无法直接包裹拖动项(即tr)的父级元素

如果你的项目中,表格未使用组件库,实现可以参考 https://3water.com/article/162648.htm

解决方案

使用 sortable.js

步骤一: 安装

npm install vuedraggable

步骤二:引入

import Sortable from 'sortablejs';

@Component({
 components: {
  Sortable
 }
})

步骤三: el-table 添加row-key属性

<el-table
 ref="filterTable"
 row-key="ip" 
 @filter-change="handlerFilterChange" 
 class="cl-table" 
 :data="resourceList" 
 v-loading="resourceListLoading" 
 stripe style="width:100%;">
 <el-table-column
   prop="name"
  label="主机名" 
  :min-width="150" 
  show-overflow-tooltip>
 </el-table-column>
 </el-table>

步骤四 : 将拖拽元素设置为要拖动项的父级元素

mounted() {
   // 表格中需要实现行拖动,所以选中tr的父级元素
  const table = document.querySelector('.el-table__body-wrapper tbody')
  const self = this
  Sortable.create(table, {
   onEnd({ newIndex, oldIndex }) {
    console.log(newIndex, oldIndex)
    const targetRow = self.resourceList.splice(oldIndex, 1)[0]
    self.resourceList.splice(newIndex, 0, targetRow)
   }
  })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript document.compatMode兼容性
Feb 23 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
Javascript进制转换实例分析
May 14 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
vue实现文字加密功能
Sep 27 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 #Javascript
Vue中实现权限控制的方法示例
Jun 07 #Javascript
vue 父组件中调用子组件函数的方法
Jun 06 #Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 #Javascript
小试小程序云开发(小结)
Jun 06 #Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 #Javascript
微信小程序如何使用globalData的方法
Jun 06 #Javascript
You might like
一个简单的域名注册情况查询程序
2006/10/09 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python的log日志功能及设置方法
2019/07/11 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python实现批处理文件
2020/07/28 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
人事专员的岗位职责
2014/03/01 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
专项法律服务方案
2014/06/11 职场文书
关于环保的标语
2014/06/13 职场文书
课外活动总结范文
2014/07/09 职场文书
初婚初育证明范本
2014/11/24 职场文书
客服专员岗位职责
2015/02/10 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
mysqldump进行数据备份详解
2022/07/15 MySQL