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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
利用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
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP安全性漫谈
2012/06/28 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
解决python爬虫中有中文的url问题
2018/05/11 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python中format函数如何使用
2020/06/22 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
大学自我评价
2014/02/12 职场文书
运动会通讯稿200字
2014/02/16 职场文书
新年晚会开场白
2015/05/29 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server