首页 > 其他分享 >sortable 拖拽后数据变更但视图不变

sortable 拖拽后数据变更但视图不变

时间:2023-10-16 16:13:34浏览次数:42  
标签:sortable 换序 视图 列表 数据 拖拽

问题

表格中某两行拖拽换序,使用 sortable.js 在拖拽结束后调用换序接口,再更新数据列表。

问题是数据变了,但视图不变。如下图所示:

image

分析

vue 无法检测数组中顺序的变化。

即使采用 $set$forceUpdate(),给组件添加 key 属性,仍然无法解决该问题。

解决办法

请求数据列表前,先重置列表。

image

标签:sortable,换序,视图,列表,数据,拖拽
From: https://www.cnblogs.com/shayloyuki/p/17767566.html

相关文章

  • Solidworks 零件重命名后,工程图视图丢失怎么办?
    SolidWorks修改零件名称后,打开工程图,发现原先标注好的图纸视图不见了,如下图所示,这是因为工程图链接的模型零件丢失,本文给大家分享解决此问题方法。解决方法:先不要直接双击打开工程图,按下面步骤操作:先打开SolidWorks,然后点击打开,选择工程图,先不要直接点下面的打开,而是先选择参......
  • 【CSS3】CSS3 3D 转换 ③ ( 3D 透视视图 | translateZ 转换分析 | 网页调试工具调试 t
    文章目录一、translateZ转换分析1、translateZ转换对应的空间分析2、网页调试工具调试translateZ属性值二、代码示例-translateZ转换分析1、代码示例-translateZ为0的参照示例2、代码示例-translateZ为200示例一、translateZ转换分析1、translateZ转换对应的......
  • UML五大视图
    树形图总结分开介绍1、用例视图--用例视图强调从系统的外部参与者(主要是用户)的角度看到的或需要的系统功能2、逻辑视图--逻辑视图从系统的静态结构和动态行为角度显示如何实现系统的功能3、进程视图--侧重于系统的运行4、开发视图(实现视图)--侧重于软件模块的组织和管理......
  • Oracle重新编译视图
    当表名、列名、列类型等底层表的信息发生改变的时候,就会使得视图无法使用,其时就需要对视图进行重新的编译。第一步,查找失效的视图。可以使用数据字典中的user_objects来查找出失效的视图名,还可以利用user_views来查找出相应视图的代码信息。基本的代码如下:----------------查......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-20-处理鼠标拖拽-下篇
    1.简介上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,其次有人私信宏哥说是有那种类似拼图的验证码如何处理。于是写了这一篇文章,另外也是相对前边做一个简单的总结......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之堆叠容器
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、堆叠组件 1、写在前面从本篇开始,我们一起来学习一下低代码平台中组件的托拉拽,虽然组件拖拽十分简单,但实际上还是有一定的技巧,新手上路难免会遇到一定的问题,如果能熟练掌握拖拽的技巧,能够有效地提升咱们的开发效率哦,今天我们先......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之滚动容器
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、滚动容器 1、写在前面上一篇中我们介绍了低代码平台组件库中的堆叠容器的一些拖拽技巧,本篇我们继续,今天带大家一些来看一个新的组件——滚动容器。关于滚动容器的直接使用其实很简单,所以这个不是今天的重点,今天的重点是如何在......
  • Excel 中使用数据透视图进行数据可视化
     使用数据透视表(PivotTable)是在Excel中进行数据可视化的强大工具。下面将提供详细的步骤来使用数据透视表进行数据可视化。**步骤一:准备数据**首先,确保你有一个包含所需数据的Excel表格。数据应该按照一定的结构和格式组织,例如,每列是一个特定的字段,每行是一个数据记录。**步......
  • 无涯教程-ASP.NET Core - Razor视图
    在本章中,无涯教程将讨论RazorViewStart。MVC中的Razor视图引擎有一个约定,即它将查找名称为_ViewStart.cshtml的任何文件,并在该文件中执行代码。ViewStart文件中的代码无法呈现到页面的HTML输出中,但可用于从各个视图内的代码块中删除重复的代码。在示例中,如果希望每个视图......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇
    1.简介本文主要介绍两个在测试过程中可能会用到的功能:在selenium中宏哥介绍了Actions类中的拖拽操作和Actions类中的划取字段操作。例如:需要在一堆log字符中随机划取一段文字,然后右键选择摘取功能。playwright同样可以实现元素的拖拽和释放的操作。2.拖拽操作鼠标拖拽操作,顾名......