vue3 el-table 实现拖拽列排序 #前端 #vue #elementplus - 李钟意讲前端于20230607发布在抖音,已经收获了8.7万个喜欢,来抖音,记录美好生活!
通过上述步骤,你可以在Element UI的el-table组件中实现列的拖拽排序功能。需要注意的是,由于直接操作DOM可能会带来一些潜在的问题(如Element UI内部更新DOM导致的拖拽失效等),因此在实际项目中可能需要进一步处理这些问题。此外,为了保持代码的健壮性和可维护性,建议将拖拽排序的相关逻辑封装成一个独立的Vue插件或组件。
//添加fixed列后 fixed列显示在第一行 让列表滚动一下scrollTable(pixels) { const tableBodyWrapper=this.$refs.table.$el.querySelector('.el-table__body-wrapper');if(tableBodyWrapper) { tableBodyWrapper.scrollTop+=pixels; } },
import Sortable from 'sortablejs' // 引入插件 mounted() { this.$nextTick(() => { this.rowDrop() // 行拖拽 }) } methods:{ // 行拖拽 rowDrop () { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { onEnd ({ newI...
我主要使用 vue3 + element plus 进行开发,当遇到这个需求时网上最常见的解决方案是vue draggable,可惜这个项目已经 3 年没更新了,而另一个实现了类似功能并且还在积极更新的项目是vue-draggable-plus,用法非常简单,而且可以很简单地支持第三方组件(例如el-table)的拖拽排序。
el-table是Element UI提供的一款表格组件,具有丰富的功能和良好的性能。它支持表格数据的动态渲染、排序、筛选等功能,使得开发者可以更便捷地处理数据展示问题。 2.拖拽列的实现方法 要实现el-table拖拽列,我们可以使用原生JavaScript或者第三方库,如Sortable.js。以下将以原生JavaScript为例,介绍如何实现拖拽列功能。©...
略去数据,与前段代码一直],};},mounted(){// 需要支持拖动效果的列表容器,在这里我们设置为el-table组件的tbody,// 注意:最前面的一段为前面el-table的class: draggable-table,主要为了防止如果页面有多个table,多个table同时实现拖拽效果// 当然,如果多个table都需要拖拽效果,选择器中最前面的.draggable-table...
需要实现如下需求,现有一个表格,每行数据都能进行拖拽,进行上下移动,并序号自动更新这样的UI效果是可以有组件支持的,那就是SortTable.js。别人造好的轮子,直接拿来用就行了。那么问题在哪里呢?在vue中使用sortTable组件拖拽表格行数据后,影响的只是页面展示效果,实际的数据并没有发生变化,还是原来的顺序。vue是基于...
setData(dataTransfer,dragEl){/*** 在页面上创建一个当前table的wrapper,然后隐藏它,只显示那一列的部分作为拖拽对象* 在下一个事件循环删除dom即可*/const{offsetLeft,offsetWidth,offsetHeight}=dragEl;consttableEl=elTableContext.$el;constwrapper=document.createElement("div");//可视区域wrapper.style=`positio...
'.el-table__row', // 拖拽的手柄元素,这里使用表格的行作为手柄 onEnd: (evt) => { this.dragSort(evt);// 拖拽结束时的回调函数 }, }); }, 到此基本已经实现可以拖拽表格的行进行移动排序。当然还是需要结合后端实现排序的记录。可以在这里的dragSort中调用后端接口进行结果保存。