vue3 el-table 实现拖拽列排序 #前端 #vue #elementplus - 李钟意讲前端于20230607发布在抖音,已经收获了8.7万个喜欢,来抖音,记录美好生活!
在这个示例中,Sortable.js被用于初始化表头的拖拽功能。当表头被拖动并释放时,onEnd回调会被触发,你可以在这里更新表头的顺序。 总结 以上两种方法都可以实现Vue3中el-table表头的拖动排序功能。你可以根据项目的具体需求和偏好选择合适的方法。记得在拖动结束后,要更新表头顺序,并确保数据列与表头对应正确。
初始化拖拽实例 代码语言:javascript 复制 constinitSort=()=>{consttable=document.querySelector(".elTable .el-table__body-wrapper tbody");Sortable.create(table,{group:'shared',animation:150,ghostClass:'sortable-ghost',//拖拽样式easing:'cubic-bezier(1, 0, 0, 1)',onStart:(item:any)=>{consol...
target 的内容其实就是一个 css 选择器,VueDraggable要根据它来定位所有行的根组件,这个选择器可以通过浏览器 f12 找到。 在下图中,我们可以看到 2 行数据的根组件是一个tbody,我们可以直接使用标签选择器选中它,即target="tbody" 然后你就可以通过拖拽来实现对数组元素的排序了。 总结 本文介绍了如何使用使用 Vue...
1.安装 vuedraggable 1 npm i -S vuedraggable 2.在使用的组件,引入sortablejs包含在vuedraggable 1 importSortable from"sortablejs" 3.row-key 必须设置 1 2 3 4 5 6 7 <divclass="list"> <divclass="f-j-b"style="padding-bottom: 10px;"> ...
目前看上去是 vue3, 一个是看 stdrElementForm.tableData 数据是否真实生效了,比如说 {{stdrElementForm.tableData}} 另一个就是加上 row-id 如果上述都不行,直接给 table 加上 key。 不推荐这个写法,因为大概率不需要这样解决 有用 回复 沙漏: 那el-form 引用这个拖拽呢 改怎么处理呢? 也是数据变化了页...
vue中el-table 实现拖拽排序 1.安装Sortable.js npm install --save sortablejs 2.在当前vue中JS代码中引入 import Sortable from ‘sortablejs’ 3.在当前vue文件template el-table中指定row-key row-key="id" rowDrop() { const tbody= document.querySelector('.el-table__body-wrapper tbody')...
2.在需要实现表格拖拽的 .vue 文件中引入 sortablejs: import Sortable from 'sortablejs' 解决思路: 1、先缓存一个与实际数据一致的数组。 2、在拖拽时,获取到原下标和拖拽后的下标,根据等同页面展示效果的拖拽算法,修改缓存的数组的顺序。 3、根据缓存的数组,重新渲染表格数据,保证页面效果与实际数据一致 ...
需求:树形结构的table需要实现同级拖拽排序 1.vue引用sortablejs 参考相关配置 importSortablefrom'sortablejs' 2.定义变量 data(){return{table:[],// 表格数据activeRows:[]// 转换为列表的数据扁平化}}, 3.初始化created中调用方法,方法如下 rowDrop(){consttbody=document.querySelector('.table .el-table...
vue-element-admin开发过程中需要对el-table行进行排序(即每一行可以上下移动),然后将排序后的数据传给后台更新数据。该表格无分页。 问题分析 方法一:可以采用在每条数据中加两个上下移动的按钮,每次移动一行。该方法实现简单,不过要连续移动的时候需要多次调用接口,交互效果不太好。