解决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项目中配置你自己的启动命令和打包命令方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于vite基本常见配置讲解的相关资料,最近做项目要求将webpack打包方式换成vite,下面将详细讲解一下配置vite需要改动的东西,需要的朋友可以参考下2023-11-11
Vue3 DOM是Vue.js框架的一部分，用于处理与浏览器DOM相关的操作，它提供了一组API和工具，使开发者能够轻松地操作和管理DOM元素，本文给大家介绍了Vue3获取元素DOM的两种方法：ref模板引用和传统方法，并有详细的代码示例,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue同个按钮控制展开和折叠同个事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了VUE3子表格嵌套分页查询互相干扰的问题解决方案,如果不需要做子表格的分页查询，那么可以直接在主表格中嵌套子表格，本文给大家介绍两种方式，需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue 结合插件moment 实现获取当前月的第一天和最后一天,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了vue中子组件调用兄弟组件方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
本篇文章主要介绍了深入理解Vue官方文档梳理之全局API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
Vue表单验证中的prop属性用于指定需要验证的表单字段,它定义了字段名称并与验证规则关联,确保数据的完整性和准确性,本文就来介绍一下element的el-form-item的prop作用,感兴趣的可以了解一下2025-01-01
这篇文章主要介绍了基于Vue的文字跑马灯组件(npm 组件包),需要的朋友可以参考下2017-05-05
最新评论