解决vue数据更新但table内容不更新的问题
更新时间：2023年08月10日 10:37:27 作者：北巷`
这篇文章主要给大家介绍了vue数据更新table内容不更新解决方法,文中有详细的代码示例供大家作为参考,感兴趣的同学可以参考阅读一下
场景：
table组件绑定的数据变化时，页面没有重新渲染，常见于子组件中使用table组件
原理：
创建实例时 数组在vue中没有被监听到，属于非响应式数据，数组的下标变化无法监听到
解决方式：
<el-table
:key="tamptime"
stripe
border
fit
height="450"
:data="tabledata"
style="width: 100%"
>
<el-table-column
v-for="i in pretabledatacolumn"
:key="i.index"
show-overflow-tooltip
:prop="i"
:label="i"
width="230"
/>
</el-table>
data(){
return {
tabledata:[],
pretabledatacolumn:[],
tamptime:new Date().valueOf()
}
}
methods:{
changeTableData(){
this.tabledata = []
}
}1、利用vue中重写的数组方法
splice，split，concat…
changeTableData(){
this.tabledata.splice(1,0)
}2、为table绑定一个key，数据变化时更改key值,或者使用v-if绑定一个不重复的值触发组件渲染
changeTableData(){
this.tamptime = new Date().valueOf()
this.tabledata = newtabledata
}3、使用$set()
changeTableData(){
this.$set(tabledata,1,'newvalue')
}到此这篇关于解决vue数据更新但table内容不更新的问题的文章就介绍到这了,更多相关vue数据更新table内容不更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在本篇内容中小编给大家分享了关于Vue中使用canvas方法和步骤，对此有需要的读者们参考学习下。2019-02-02
在现代Web开发中,前端框架的使用越来越普遍,而Vue.js作为一款优秀的前端框架,其生态系统中有着非常重要的一个组件——Vue Router,在本篇博客中,我们将深入探讨如何在Vue Router中定义路由规则,需要的朋友可以参考下2024-12-12
这篇文章主要为大家介绍了vue导出excel表格并支持样式及行高修改，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
今天小编就为大家分享一篇vue.js 实现点击按钮动态添加li的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中实现拖动调整左右两侧div的宽度的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式,下面这篇文章主要给大家介绍了关于Vue过滤器（filter）实现及应用场景的相关资料,需要的朋友可以参考下2021-06-06
vue 解决setTimeOut和setInterval函数无效报错的问题
这篇文章主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家介绍了vue2从数据到视图渲染之模板渲染详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue3 + Three.js实现自定义3D模型加载与交互实战全流程
Three.js是一个用于创建3D图形的JavaScript库,它基于WebGL技术,并提供了一系列的工具和API,这篇文章主要介绍了Vue3 + Three.js实现自定义3D模型加载与交互实战的相关资料,需要的朋友可以参考下2025-12-12
文章介绍了使用Vue3和VueUse实现基于SSE（Server-Sent Events）的全局事件通讯系统,SSE具有单向通信、基于HTTP、自动重连和轻量级等特点,适合实时性要求高的应用,实现方案包括订阅消息、取消订阅和关闭连接等功能2025-10-10
最新评论