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) { tableBodyWrappe...
el-table拖动排序 html# <el-table ref="multipleTable" :data="tableData" align="left" border class="mytable" row-key="id"> <el-table-column :index="indexMethod" align="center" type="index"></el-table-column> <el-table-column label="字段名称" prop="description"></el-table-column>...
略去数据,与前段代码一直],};},mounted(){// 需要支持拖动效果的列表容器,在这里我们设置为el-table组件的tbody,// 注意:最前面的一段为前面el-table的class: draggable-table,主要为了防止如果页面有多个table,多个table同时实现拖拽效果// 当然,如果多个table都需要拖拽效果,选择器中最前面的.draggable-table...
我主要使用 vue3 + element plus 进行开发,当遇到这个需求时网上最常见的解决方案是vue draggable,可惜这个项目已经 3 年没更新了,而另一个实现了类似功能并且还在积极更新的项目是vue-draggable-plus,用法非常简单,而且可以很简单地支持第三方组件(例如 el-table)的拖拽排序。
handle: ".el-icon-s-operation", // 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动 animation: 150, // 拖拽延时 onEnd({ oldIndex, newIndex }) { // 转换缓存数组顺序 _this.tableData = _this.getOrderList( ...
table容器,table的容器,用来还原表格宽度,以及日后样式上的还原 cloneNode 所以我们通过修改setData事件来控制,具体代码如下 setData(dataTransfer,dragEl){/*** 在页面上创建一个当前table的wrapper,然后隐藏它,只显示那一列的部分作为拖拽对象* 在下一个事件循环删除dom即可*/const{offsetLeft,offsetWidth,offsetHeight}...
简介:基于sortablejs实现拖拽element-ui el-table表格行进行排序 可以用原生的dragstart、drag、dragend、dragover、drop、dragleave实现这个效果,但是有现成的轮子就不要重复造了,看效果: <template><el-table :class="$options.name" :data="tableData" ref="table" row-key="ID"><!-- 注意:必须要定义row-...
'.el-table__row', // 拖拽的手柄元素,这里使用表格的行作为手柄 onEnd: (evt) => { this.dragSort(evt);// 拖拽结束时的回调函数 }, }); }, 到此基本已经实现可以拖拽表格的行进行移动排序。当然还是需要结合后端实现排序的记录。可以在这里的dragSort中调用后端接口进行结果保存。