1.调取接口获取数据table数据 2.参考接口表格字段mock页面要调整的数据 3.引入mock的字段顺序h和相关第三方表格拖拽 4.el-table渲染相关数据 5.el-table拖拽实现 二、el-table表格动态排序字段 1.根据mock的动态表头实现一个控制字段的表格 2.相关方法 3.表格字段下移方法 总结 前言 背景 公司给了一个需求,需要...
通过上述步骤,你可以在Element UI的el-table组件中实现列的拖拽排序功能。需要注意的是,由于直接操作DOM可能会带来一些潜在的问题(如Element UI内部更新DOM导致的拖拽失效等),因此在实际项目中可能需要进一步处理这些问题。此外,为了保持代码的健壮性和可维护性,建议将拖拽排序的相关逻辑封装成一个独立的Vue插件或组件。
vue3 el-table 实现拖拽列排序 #前端 #vue #elementplus - 李钟意讲前端于20230607发布在抖音,已经收获了8.8万个喜欢,来抖音,记录美好生活!
-- 注意这里的 row-key 需要设置,否则拖动排序可能显示不正常 --> <el-table :data="tableList" row-key="id"> <el-table-column prop="..." label="..."></el-table-column> ... </el-table> </template> mounted() {// 初始化,因为是写死的数据所以在mounted中初始化,实际情况是在tableLis...
'.el-table__row', // 拖拽的手柄元素,这里使用表格的行作为手柄 onEnd: (evt) => { this.dragSort(evt);// 拖拽结束时的回调函数 }, }); }, 到此基本已经实现可以拖拽表格的行进行移动排序。当然还是需要结合后端实现排序的记录。可以在这里的dragSort中调用后端接口进行结果保存。
略去数据,与前段代码一直],};},mounted(){// 需要支持拖动效果的列表容器,在这里我们设置为el-table组件的tbody,// 注意:最前面的一段为前面el-table的class: draggable-table,主要为了防止如果页面有多个table,多个table同时实现拖拽效果// 当然,如果多个table都需要拖拽效果,选择器中最前面的.draggable-table...
当时需求澄清会议,一讲这个需求,我脑袋一啪,很快就想到,element-plus table 应该有内置的拖拽功能吧,毕竟也不算啥特殊需求。话不多说,直接上官网一查,是我多想了,这看来是个不常见的需求。那只能自己手搓了。。。 手搓第一步:想想怎么搓? 重点在于:拖动行到某一位置,拿到这一位置的标识,数据插入进这个位置...
需要实现如下需求,现有一个表格,每行数据都能进行拖拽,进行上下移动,并序号自动更新这样的UI效果是可以有组件支持的,那就是SortTable.js。别人造好的轮子,直接拿来用就行了。那么问题在哪里呢?在vue中使用sortTable组件拖拽表格行数据后,影响的只是页面展示效果,实际的数据并没有发生变化,还是原来的顺序。vue是基于...
看到排序 相信大家第一时间都会想到 vuedraggable 但是 经由本人测试后发现 el-table,如果用 draggable 标签包裹,那么排序的只是表格本身。 那么怎么办呢 我说下我的解决方案 首先安装sortablejs 然后引入 sortablejs tbody 为获取的table对象 Sortable.create(tbody,{ ...
1、表格需要定义一个class,便于指定拖拽哪个表格里的行 2、需要定义row-key,唯一的,一般定义为syscode 3、在获取表格数据后,初始化拖拽方法 4、操作列需要加入拖拽图标 1 2 3 4 <el-tableclass="tableClass"row-key="syscode":data="tableData"style="width: 100%"> ...