怎么在sortable中利用element实现表格行拖拽
怎么在sortable中利用element实现表格行拖拽?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了新宾免费建站欢迎大家使用!
背景
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的过程中,发现必须用
如果你的项目中,表格未使用组件库,实现可以参考 https://www.jb51.net/article/162648.htm
解决方案
使用 sortable.js
步骤一: 安装
npm install vuedraggable
步骤二:引入
import Sortable from 'sortablejs'; @Component({ components: { Sortable } })
步骤三: el-table 添加row-key属性
步骤四 : 将拖拽元素设置为要拖动项的父级元素
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) } }) }
关于怎么在sortable中利用element实现表格行拖拽问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
本文题目:怎么在sortable中利用element实现表格行拖拽
网页地址:http://scyanting.com/article/pjipde.html