怎么在合适的中利用元素实现表格行拖拽 - 行业资讯 - 肥雀云

　　介绍

怎么在合适的中利用元素实现表格行拖拽?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强>背景

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

2,表格使用元素组件库中el-table

<强>方案介绍

Sortable.js

介绍:可分类的。js是一款轻量级的拖放排序列表的js插件

引用自官方文档:不需要jQuery。支持流星、AngularJS反应、聚合物Vue,淘汰赛和任何CSS库,例如引导。

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

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

引用自官方文档:Vue拖放基于组件> npm install vuedraggable

步骤二:引入

import Sortable 得到& # 39;sortablejs& # 39;; 　　　　@ component ({ 　　,组件:{ 　　,可分类的　　,} 　　})

步骤三:el-table添加行键属性

& lt; el-table 　　,ref=癴ilterTable" 　　行键=癷p"大敌; 　　,@filter-change=癶andlerFilterChange" 　　类=癱l-table"大敌; 　　,:data=https://www.yisu.com/zixun/皉esourceList” 　　v-loading=" resourceListLoading " 　　条纹> 　　　　　　

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

安装(),{//,,,表格中需要实现行拖动,所以选中tr的父级元素　　const 才能;table =, document.querySelector (& # 39; .el-table__body-wrapper tbody # 39;) 　　const 才能;self =, 　　Sortable.create才能(表,,{ 　　,,竖着({newIndex的不同之处是,oldIndex }), { 　　,,,console.log (newIndex, oldIndex) 　　,,,const targetRow =, self.resourceList.splice (oldIndex, 1) [0] 　　,,,self.resourceList.splice (newIndex, 0, targetRow) 　　,,} 　　})才能　　,}

关于怎么在合适的中利用元素实现表格行拖拽问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。