场景:
table组件绑定的数据变化时,页面没有重新渲染,常见于子组件中使用table组件
原理:
创建实例时 数组在vue中没有被监听到,属于非响应式数据,数组的下标变化无法监听到
解决方式:
<el-table:key="tamptime"stripeborderfitheight="450":data="tabledata"style="width: 100%"><el-table-columnv-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')}