el-table行拖拽排序效果的实现(基于sortablejs)
程序开发
2023-09-08 11:52:05
前言
ElementUI中的Table
组件对于展示数据来说,有着不可替代的作用。但是也有一点点小缺陷,比如行不支持拖拽效果。
当然我们可以借助于第三方库来实现行拖拽效果。
实现方法
实现拖拽效果需要借助于sortablejs
库来实现。
GitHub:https://github.com/SortableJS/Sortable
中文网站(无法验证是否为官方网店):http://www.sortablejs.com/
sortablejs
有以下优点(摘至部分readme文档):
- Supports touch devices and modern browsers (including IE9) 支持大部分触屏设备及现代浏览器(包括IE9)
- Can drag from one list to another or within the same list 支持列内拖动及列间拖动
- CSS animation when moving items 支持拖动时动画效果
- Multi-drag support 支持同时拖动多个
- Built using native HTML5 drag and drop API 根据原生Html5 drag和drop API穿件
- 支持多种框架(Meteor、Angular、React、Knockout、Ploymer、Vue、Ember)
- 等等其他。。。
安装sortablejs
npm方式:
$ npm install sortablejs --save
使用
- 普通
el-table
代码如下:
- 引入
sortablejs
组件:
至此,拖拽效果就已完成,具体效果如下:
详细代码请移步至:https://codesandbox.io/s/el-table-drag-row-qj1ws7
后记
如有疑问,可以在评论区进行交流。也欢迎点赞⭐收藏 :)
拓展阅读:
- React + Router + Antd实现多标签页功能(具体代码实现)
- 几款常用的表单设计器解决方案
- React + Antd实现动态切换主题功能
标签:
上一篇:
为什么IDEA不推荐你使用@Autowired ?
下一篇:
相关文章
-
无相关信息