从化网站开发公司计算机基础培训机构

场景：

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')}