sortablejs拖拽后新增和删除行时顺序错乱

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量304 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42566993/article/details/134525208
版权

问题描述：如下图所示，使用sortablejs拖拽后，在序号2后新增行会出现新增行跑到第一行的错误顺序。

在这里插入图片描述

解决：在进行拖拽后，对表格数据进行清空重新赋值。

在这里插入图片描述

King_960725
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
C# WPF DataGrid行拖拽顺序交换
12-02
C# WPF DataGrid行拖拽顺序交换，通过按下rowheader，移动到目标行rowheader松开，实现列表顺序交换
前端elementui表格拖拽sortablejs避坑，vue2前端表格列拖拽解决方案
weixin_43882434的博客
12-26 4196
sortablejs是目前比较多人用的elementui表格拖拽的插件，但是这个插件的bug很不友好：主要bug是拖拽列后不能调整列的宽，处理这个bug只能是不让用户调整列宽。这里还是简单介绍下sortablejs的使用吧，然后再介绍一个很好用的表格插件GridManager。1、首先下载 sortablejs2、在需要使用拖拽的页面进行使用`{}`
鼠标拖动行 交换两行位置顺序
12-27
c# 鼠标拖动行 交换两行位置顺序。很方便的进行行的位置进行交换，很有用。
解决Sortable拖动el-table表头时，由于选择列造成的拖拽顺序错乱的bug
qq_47657875的博客
12-11 1264
QQ录屏20231114131536。
ant-design-vue table 表格组件错位解决
东扯葫芦西扯瓜——前端小菜鸟的博客
04-23 9948
ant-design-vue table 表格组件错位解决原因查找错位消失机制解决思路试验一试验二解决的背后 table组件错位问题。 table组件错位，不管是用element-ui的table组件，还是ant的table组件，只要使用了列的fixed属性，在第一次进入页面时就会出现。 原因查找 经检查dom发现使用fixed后，table组件实际由3个table组成，左边一个，中间一个，右边一个 。如果中间表格有某一列的内容有换行或者特殊内容等， ，这会导致表格实际高度比没有特殊内容要高。三个表格
html 记住位置,原生js完美拖拽，每次刷新可以记住上次拖拽的位置
weixin_29194255的博客
06-04 267
原生代码片段 1/p>借助cookie来记住每次拖拽结束的位置代码片段 2-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>无标题文档function setCookie(name,value,expires){var oDate=new D...
el-table + textarea输入 + sortablejs +删除+添加 实现拖拽排序 的研究！
放弃不难，但坚持一定很酷！
08-02 1179
el-table + textarea输入 + sortablejs +删除+添加 实现拖拽排序 的研究
sortablejs 列表拖拽后刷新保持上次拖动
weixin_43440893的博客
01-22 1459
sortablejs 列表拖拽后刷新保持上次拖动。
解决 element + sortablejs 实现表格拖拽 顺序出现混乱问题
qq_40431271的博客
06-18 3825
最根本问题就是table表格的row-key问题 直接上代码 <template> <div> <el-table :data="tableData" style="width: 60%;margin: auto;margin-top: 100px" class="project-auth-emp-list-table" row-key="id" border> <el-table-column label="日期" width="180"
vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案
EchoLiner的博客
07-16 2672
项目使用element ui 的表格实现拖动表头可改变列的宽度，又使用sortablejs实现表格的列可拖拽到其他列的位置，导致出现如下的一些问题： 1、某一列宽变大或变小后，只有当前列可拖拽，其他列无法拖拽。 解决方案：在列宽发生改变后，销毁当前拖拽实例，再重新创建拖拽实例。 this.sortDemo.destroy() 2、当表格没有横向滚动条时，某一列宽变大或变小时，其他列宽也会变大或变小。 根因：表格的列不够多，不足以撑开表格的整体宽度。 结论：当表格没有横向滚动条时，拉宽某一列，表
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
10-16
主要介绍了Elementui表格组件+sortablejs实现行拖拽排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Android recyclerview实现拖拽排序和侧滑删除
08-31
主要为大家详细介绍了Android recyclerview实现拖拽排序和侧滑删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS解决拖拽后刷新位置丢失问题
越陌度阡
08-16 729
在给页面中的元素时行拖拽时，如果拖拽到一半，页面刷新了，上一次拖拽的位置就会丢失，今天给大家分享一个小Demo，主要运用的localStorage来解决的这个问题，以下是代码实现，欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content............
sortable.js 插件拖拽后视图出错解决
liuxiang15的博客
10-16 1256
问题说明： vue+element-ui+sortable实现el-table拖拽功能 结果拖拽后发现数据更新了，视图没更新 行拖拽代码： /** * 行拖拽 */ rowDrop () { // 此时找到的元素是要拖拽元素的父容器 const tbody = document.querySelector('.el-table__body-wrapper tbody')
Vue中使用Sortable bug:排序混乱、与数据不一致、拖拽结束后回跳
热门推荐
u012169390的博客
09-24 1万+
先答案 推荐方案：正确绑定key https://www.jianshu.com/p/d92b9efe3e6a 此文很详细了，各位应该看这个就够了，方案也在里面，我尽量不重复造轮子，做补充。 原因： VUE中的virtualDom与真实dom不匹配 思路 现象 1.打印数据是正常的 2.观察到拖拽dom对象后，dom对象又被调换回去 3.当不对data数据进行操作是正常的 4.我写了一个单文件组件...
Vue3、el-table、sortablejs实现行拖动时出现的问题和解决方案
qq_33474979的博客
02-15 2585
Vue3、el-table、sortablejs实现行拖动时出现的问题和解决方案初始化出现的问题解决方案 初始化 插件引入参考其他文章 <div class="header-set-main"> <el-table :data="dictList" show-overflow-tooltip height="450" highlight-current-row ref="di
如何利用js实现删除表格每行的功能？
csgojingyu的博客
09-21 694
一定要包含在<table></table>之间，否则会打印多个表头！
员工管理 封装组件全局注册 sortable数据升序处理 枚举取值三种方法 删除操作 新增员工操作
weixin_68531033的博客
06-27 239
新建员工页在下面补充创建 ，内容如下： 引入插槽让用户能自定义内容 使用组件设置,内容如下： 全局注册使用全局注册方法二 封装自己的组件在components组件新建index.js 组件用于封装 信息在main.js中注册自己的组件 页面一加载获取员工信息发送请求定义接口函数 在employees.js中定义接口函数调用接口 在employees.vue中调用接口渲染表格 在 绑定信息 通过sortable实现对数据的升序和..................
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 578
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue3 sortablejs拖拽后重新赋值出现回跳问题
03-29
问题描述： 使用Vue3和Sortable.js实现拖拽排序功能，拖拽排序后重新赋值给原数组，出现回跳问题，即拖拽的元素会回到原来的位置。 原因分析： 这是因为拖拽排序后，Sortable.js会将原数组的顺序重新排列，而Vue.js对数组的响应式更新是通过监测数组的变异方法（如push、pop、shift、unshift、splice、sort、reverse等）来实现的，而Sortable.js并没有调用这些变异方法，所以Vue.js并没有检测到数组的变化，从而导致回跳问题。 解决方法： 一种解决方法是手动调用Vue.js的数组变异方法，来更新数组的顺序。具体实现方法如下： 1. 在Vue组件中引入Sortable.js库。 ```javascript import Sortable from 'sortablejs' ``` 2. 在组件的mounted生命周期钩子中初始化Sortable.js实例，并传入需要排序的元素和配置项。 ```javascript mounted() { this.$nextTick(() => { this.sortable = new Sortable(this.$refs.list, { onEnd: this.sortHandler }) }) } ``` 其中，onEnd是Sortable.js的一个回调函数，当拖拽结束后会自动调用该函数。 3. 实现sortHandler方法，该方法会在拖拽结束后自动调用，用来更新数组的顺序。 ```javascript sortHandler(event) { const { newIndex, oldIndex } = event const item = this.list.splice(oldIndex, 1)[0] this.list.splice(newIndex, 0, item) } ``` 其中，newIndex和oldIndex分别表示拖拽结束时元素的新索引和旧索引。通过splice方法，将拖拽的元素从旧索引位置删除，再将其插入到新索引位置即可。 4. 在组件的beforeUnmount生命周期钩子中，销毁Sortable.js实例。 ```javascript beforeUnmount() { this.sortable.destroy() } ``` 完整代码示例： ```javascript <template> <div ref="list"> <div v-for="(item, index) in list" :key="item.id"> {{ item.text }} </div> </div> </template> <script> import Sortable from 'sortablejs' export default { data() { return { list: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, { id: 4, text: 'Item 4' }, { id: 5, text: 'Item 5' } ], sortable: null } }, mounted() { this.$nextTick(() => { this.sortable = new Sortable(this.$refs.list, { onEnd: this.sortHandler }) }) }, beforeUnmount() { this.sortable.destroy() }, methods: { sortHandler(event) { const { newIndex, oldIndex } = event const item = this.list.splice(oldIndex, 1)[0] this.list.splice(newIndex, 0, item) } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King_960725

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值