解决vue数据更新但table内容不更新的问题
作者：北巷`
这篇文章主要给大家介绍了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内容不更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！