使用vue3在element plus中在el-table中拖拽
1.安装 vuedraggable
1 | npm i -S vuedraggable |
2.在使用的组件,引入sortablejs包含在vuedraggable
1 | import Sortable from "sortablejs" |
3.row-key 必须设置
1 2 3 4 5 6 7 | <div class = "list" > <div class = "f-j-b" style= "padding-bottom: 10px;" > <div>数据列表</div> </div> <el-table :data= "tableData" border row-key= "id" > <el-table-column prop= "name1" label= "数据1" align= "center" /> <el-table-column prop= "name2" label= "数据2" align= "center" /> <br> <el-table-column prop= "originalPrice" label= "数据3" align= "center" /><br> </el-table><br> </div> |
4.在setup()中编写拖拽的逻辑,创建一个Sortable的实例,将需要拖拽的元素给到Sortable实例,进行需要的配置,然后在拖拽结束的方法onEnd()中实现改变排序的逻辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | // 表格行拖拽 const rowDrop = () => { let tbody = document.querySelector( ".el-table__body-wrapper tbody" ); Sortable.create(tbody, { group: { // 相同的组之间可以相互拖拽 name: "table" , pull: true , put: true , }, animation: 150, // ms, number 单位:ms,定义排序动画的时间 onAdd: function (e: any) { // 拖拽时候添加有新的节点的时候发生该事件 console.log( "onAdd.foo:" , e); }, onUpdate: function (e: any) { // 拖拽更新节点位置发生该事件 console.log( "onUpdate.foo:" , e); }, onRemove: function (e: any) { // 删除拖拽节点的时候促发该事件 console.log( "onRemove.foo:" , e); }, onStart: function (e: any) { // 开始拖拽出发该函数 console.log( "onStart.foo:" , e); }, onSort: function (e: any) { // 发生排序发生该事件 console.log( "onUpdate.foo:" , e); }, onEnd(e: any) { // 结束拖拽 console.log( "结束表格拖拽" , e); // 如果拖拽结束后顺序发生了变化,则对数据进行修改 if (e.oldIndex !== e.newIndex) { moveTable(e.oldIndex, e.newIndex) // 排序后和后端的交互函数 } }, }); } |
参考:https://www.itxst.com/vue-draggable/tutorial.html
https://blog.csdn.net/weixin_40449665/article/details/126160894
分类:
vue3
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章