当前位置: 首页 > news >正文

VUE 视图不刷新解决方法

折腾VUE总会遇到这种问题,一直以来都是想用各种方法凑合,网上一般也是方法各异,像this.$updateForce强制刷新视图(基本无效),还有用vue的set方法、js的splice方法设置数据,但这并不能解决所有问题,也有人说用key,但一直没试过,直到今天尝试着用key来解决,结果发现还是很OK的。

具体方法就是在每次更新数据后,刷新一下key,比如我想刷新表格的其中几列,那么我可以这样写:

<el-table-column label="列1" :key="'col1'+timestamp"></el-table-column>
<el-table-column label="列2" :key="'col2'+timestamp"></el-table-column>
<el-table-column label="列3" :key="'col3'+timestamp"></el-table-column>

timestamp 是时间戳,可用以下代码获取。

this.timestamp = new Date().valueOf()

每次刷新数据后,重新给timestamp赋值,然后视图就会跟着刷新了。

当然,key并不局限于表格,其他地方也一样可以用,比如拖拽操作中,发现拖拽后数据更新了,但视图还是原来的老样子,也可以使用这个key,每个被拖拽的元素都加一个key,每次拖拽完给timestamp重新赋值就OK了。

同理,如果想整个刷新表格,则给<el-table :key="'table'+timestamp">......</el-table>即可,而el-table-column就不需要再加key了。

但是要注意一点,刷新key可能会导致原有的绑定事件失效。

相关文章:

  • kvm虚拟机迁移--来自gpt
  • docker 部署 nali 开源 IP 地理信息归属查询软件
  • 【教程】Kotlin语言学习笔记(五)——Lambda表达式与条件控制
  • 是谁?写的Java神作一出版就获Jolt图书大奖【抽奖赠书】
  • java数组与集合框架(一) -- 数据结构,数组
  • 15.Python访问数据库
  • Springboot整合Milvus向量库
  • hcip-datacom英文词汇积累简述1
  • Python PyQt5——QPainter 绘图用法与代码示例
  • 【Web】NSSCTF Round#20 Basic 两道0解题的赛后谈
  • 39.基于SpringBoot + Vue实现的前后端分离-无人智慧超市管理系统(项目 + 论文PPT)
  • CSS 实现伸缩导航仪表板侧边栏菜单
  • PHP教程_如何向PHP5中的数组(Array)插入元素
  • 前端跨页面通信方案介绍
  • JavaScript 删除数组中指定元素的6种方法
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • 77. Combinations
  • Android单元测试 - 几个重要问题
  • Android框架之Volley
  • axios请求、和返回数据拦截,统一请求报错提示_012
  • JavaScript HTML DOM
  • JavaScript设计模式之工厂模式
  • JS数组方法汇总
  • leetcode讲解--894. All Possible Full Binary Trees
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • nodejs实现webservice问题总结
  • Spark学习笔记之相关记录
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • 飞驰在Mesos的涡轮引擎上
  • 用quicker-worker.js轻松跑一个大数据遍历
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​TypeScript都不会用,也敢说会前端?
  • # C++之functional库用法整理
  • # 数据结构
  • ${factoryList }后面有空格不影响
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (附源码)小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (四)Android布局类型(线性布局LinearLayout)
  • (学习日记)2024.01.19
  • (转)关于如何学好游戏3D引擎编程的一些经验
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • *Django中的Ajax 纯js的书写样式1
  • . NET自动找可写目录
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET 4.0中使用内存映射文件实现进程通讯
  • .Net Core缓存组件(MemoryCache)源码解析
  • .php结尾的域名,【php】php正则截取url中域名后的内容
  • .project文件
  • @DateTimeFormat 和 @JsonFormat 注解详解
  • @JoinTable会自动删除关联表的数据
  • @KafkaListener注解详解(一)| 常用参数详解