<el-tablerow-key="kid"/> 如果拖拽的是父节点,父节点和子节点中的kid重新生成,让el-table局部刷新,不然会出现父节点移除,子节点还是在原有的位置,但是tableData中已经是最新的数据 拖拽完成之后调用接口保存当前排序 如果拖拽父节点,只传父节点kid, 从convertMap对象找对应的index 如果拖拽子节点,传子节点kid,...
实现拖拽效果需要借助于sortablejs库来实现。 GitHub:https://github.com/SortableJS/Sortable 中文网站(无法验证是否为官方网店):http://www.sortablejs.com/ sortablejs有以下优点(摘至部分readme文档): Supports touch devices and modern browsers (including IE9) 支持大部分触屏设备及现代浏览器(包括IE9) Can ...
这是一个基于 sortablejs 来实现的 el-table 的拖拽功能的基础实现 然后 这个过程中遇到的一个比较特殊的问题是, 关于 el-table-column 的 fixed 的属性, 对于 sortablejs 这边来定位目标选择列 影响的一个问题 在基础的用例中, 使用 “.el-table__body-wrapper tbody” 去定位目标元素, 然后 带 class 为 ...
tableHeader = tempHableHeader; }); }, }); }, // 行拖拽 // 个人认为行拖拽不用加,因为加了以后,就不能双击选行单元格的文字了,当然还是要听产品大佬安排 rowDropInit() { // 第一步,获取行容器 const wrapperRow = document.querySelector( ".el-table__body-wrapper tbody" ); const that = ...
目前为止,可以实现整个table行拖拽的时候进行排序,但是也会有写问题,当前行拖拽的范围有点大,可能会有很多误触的情况,此时只需要修改Sortable参数的handle 即可。可以在表格行中添加一个按钮,将这个按钮设置为handle。这样就可以实现将拖拽响应绑定在一个按钮的范围。
需要实现如下需求,现有一个表格,每行数据都能进行拖拽,进行上下移动,并序号自动更新这样的UI效果是可以有组件支持的,那就是SortTable.js。别人造好的轮子,直接拿来用就行了。那么问题在哪里呢?在vue中使用sortTable组件拖拽表格行数据后,影响的只是页面展示效果,实际的数据并没有发生变化,还是原来的顺序。vue是基于...
表格行数据可以进行拖拽,后台数据返回正确,但是页面无法正确展示找到问题了,that.articleList.splice(newIndex, 0, currRow)这句的问题
近期做项目遇到两个表格之间数据相互拖动,由于sortablejs 操作的是dom,不会更新数据,所以在拖动完成后手动修改数据,注意要给表格绑定row-key 否则内部排序会紊乱! 全部代码如下 <template> <div> <div class="headBox"> <h1>左右两边相互拖拽行</h1> </div> <div class="box"> <div> <el-table border sty...
1、安装 sortablejs npm i sortablejs --save 1. 2、再要使用的引入,或者全局引入也可以,但是我是在使用的地方引入的 import Sortable from 'sortablejs' 1. 3、直接看代码吧 <template> <div> <el-table :data="tableData" border id="crTable" row-key="id"> ...