vue项目中列表的重新渲染

最新推荐文章于 2024-05-27 18:23:33 发布
最新推荐文章于 2024-05-27 18:23:33 发布
阅读量1.6k 收藏
点赞数
文章标签： html5 elementui vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44169027/article/details/118757907
版权

因为项目的需求需要通过按钮来实现表格的重新的渲染

开始想的方法有点蠢，就是通过重新调用接口获取数据来实现重新渲染；

但是这个方法在重复切换的时候发现还是有失效的问题 如1→2没问题，但是2→1就有问题了；

最终解决方法
后来发现通过变换key的值来成功实现了列表的重新渲染
在列表的标签的标签上增加key如下

<div class="table" :key="tableKey">

通过点击更改tableKey的值如
this.tableKey++;
这样就实现了页面的重复渲染

deanwinnie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.0重新渲染数据三种方法
04-30
利用v-for渲染数据，通过方法改变了数据，视图没有更新，由于javascript的限制，Vue不能检测到以下变动的数组，本DEMO主要展示解决办法。
Vue列表页渲染优化详解
08-29
在列表渲染中，通过`v-if`或`v-show`控制元素的显示，可以避免渲染不需要的元素。如果某些列表项在初始渲染时就不应显示，使用`v-if`可以延迟它们的创建。 4. **使用`key`属性**： 在`v-for`循环中提供`key`属性...
Vue重新渲染表格从第一页开始
weixin_43276017的博客
03-03 346
修改currentpage没有效果，要在分页el-pagination中添加这一句 :current-page.sync="currentPage" 相当于把currentPage变量和分页的当前页绑定
VUE组件重新渲染-——通过改变key 使得vue重新渲染页面
最新发布
昭昭
05-27 431
这个组件这么写就没考虑这个动态的事情，但是又只有一个地方用到了 所以在想怎么让他支持根据id变化来动态支持数据刷新，第一时间想到的是改组件写watch 去监听id，但是这样就需要去改组件改接口不能再用hook了，所以我去搜罗了怎么能让组件重新渲染。场景是这样的有一个公共列表组件他是通过hook来实现的接口数据啥的，但是我在某个地方需要用到了某个列表去详情页展示，需要动态变换id来切换数据，但是公共的组件不能实现。如果组件中有未保存的数据、表单输入或者其他临时状态，这些数据会在组件重新创建时丢失。
vue+element中表单重新编辑数据渲染小问题
qq_41732757的博客
08-18 810
问题：vue+element中表单重新编辑数据渲染小问题： 页面展示效果如下： 实际想要的效果：
Vue——列表渲染
hulin的博客
04-07 380
Vue的列表渲染
vue项目中引入noVNC远程桌面的方法
08-27
"vue项目中引入noVNC远程桌面的方法" 一、简介 在本文中，我们将介绍如何在 Vue 项目中引入 noVNC 远程桌面，以满足分布式用户共享服务器资源的需求。 二、noVNC 介绍 noVNC 是一个 HTML5 VNC 客户端，它采用 ...
vue项目中遇到的难点面试.pdf
12-14
"Vue项目中遇到的难点面试" 本资源摘要信息主要集中在Vue项目中遇到的难点面试问题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP的区别等相关知识点。 1. Vue的基本原理 Vue的基本原理是基于数据...
在Vue 中实现循环渲染多个相同echarts图表
10-15
在Vue.js应用中，循环渲染多个相同的Echarts图表是一项常见的需求，这通常涉及到数据驱动视图的概念，即根据数据动态生成多个组件。以下是一个详细解释如何实现这一功能的方法： 首先，确保你已经在项目中安装了...
Vue ECharts 二次渲染/重新渲染宽高为0，图表不显示，改变浏览器窗口大小即可显示图表的问题
m0_48968874的博客
07-24 1745
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。前言：这篇博客是基于父组件传值（option）给子组件即echart页面为基础的渲染图标的。话不多说，直接看代码。一个基于 JavaScript 的开源可视化图表库。
vue 强制组件重新渲染(重置)的两种方案
12-30
数据通过异步操作后，对之前刚加载的数据进行变更后，发现数据不能生效 方案一 当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题 [removed] export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false this.$nextTick(()=>{
VUE数据的重新渲染
yanzhitao1126的博客
01-08 1679
VUE数据的重新渲染 在一个复杂的数据结构中：list[{list2:[]},{list2:[]},…]，修改list2中的某一个值后，进行了处理后，但处理后的值不重新渲染。但通过控制台的打印，看到的数据是处理后的，因此也就明白数据是没有重新渲染出来，然后就进行了各种调试，现总结如下： 1、通过重新加载整个list进行渲染（结果：失败） var list = [...this.list]; th...
vue.js(8)-列表渲染
一个人的江湖
12-28 657
用v-for把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。 案例1：<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </u
Vue 强制重新渲染子组件
ai_xy的博客
12-17 550
方法一： 通过 :key 值变更触发DOM重新渲染 方法二： 通过 v-if 重新渲染DOM
VUE的列表渲染
weixin_43228946的博客
09-13 1370
VUE的列表渲染
vue + table原生实现表格单元列列宽可重置
weixin_42711805的博客
04-06 1155
【代码】vue + table原生实现表格单元列列宽可重置。
Vue中实现列表 checkbox 的双向绑定 及 初始化渲染
热门推荐
_夜渐凉
08-09 1万+
双向绑定可以绑定到同一个数组 &lt;input type="checkbox" value="Jack" v-model="checkedNames"&gt; &lt;label for="jack"&gt;Jack&lt;/label&gt; &lt;input type="checkbox" value="John" v-m
vue项目重新渲染页面
07-27
在Vue项目中重新渲染页面通常有几种方法，具体取决于您的需求和项目的结构。以下是一些常见的方法： 1. 使用Vue的响应式数据：Vue通过双向绑定和响应式数据追踪数据的变化，并在数据发生改变时自动重新渲染相关的组件。确保您正确地定义了响应式属性，并在需要重新渲染时更新这些属性。 2. 使用Vue的计算属性：计算属性是基于响应式数据进行计算并缓存结果的属性。您可以在计算属性中返回需要重新渲染的数据，当计算属性依赖的响应式数据发生变化时，它会自动重新计算并触发重新渲染。 3. 使用Vue的watch属性：通过设置watch属性，您可以监视特定的数据变化，并在变化发生时执行相应的操作，例如重新渲染组件。在watch属性中监听相关的数据，并在数据变化时执行重新渲染的逻辑。 4. 使用条件渲染：通过使用v-if或v-show指令，您可以根据特定的条件来控制组件是否显示。当条件发生变化时，Vue会根据新的条件重新渲染组件。 5. 使用Vue的强制更新方法：在某些情况下，手动触发Vue实例的强制更新可能是必要的。您可以通过调用$forceUpdate()方法来强制重新渲染整个组件树。 请根据您的具体需求选择适合的方法，并在代码中正确地应用它们来实现页面的重新渲染。如果您有具体的代码或更详细的问题，欢迎提供，我将尽力帮助您解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值