el-table 表头数据变更以后 页面没有更新最新的表头
如果您使用的是 Element UI 的 el-table 组件,您可以通过以下步骤解决表头数据变更后页面没有更新最新表头的问题:
-
确保您已经将最新的表头数据传入到 el-table 组件中。
-
在 el-table 组件中添加 :key 属性,并将其绑定到表头数据的一个唯一属性上,例如表头数据的 id 属性。
<el-table :key="tableHeader.id" :data="tableData">
<el-table-column v-for="column in tableHeader" :key="column.id" :prop="column.prop" :label="column.label"></el-table-column>
</el-table>
- 在表头数据变更后,手动更新 el-table 组件的 key 值,以触发组件重新渲染。
// 更新表头数据
this.tableHeader = newTableHeader;
// 更新 el-table 组件的 key 值,以触发组件重新渲染
this.$nextTick(() => {
this.tableHeader.id = Date.now(); // 或者使用其他唯一值
});
通过以上步骤,您可以解决 el-table 表头数据变更以后页面没有更新最新的表头的问题。
原文地址: https://www.cveoy.top/t/topic/brYb 著作权归作者所有。请勿转载和采集!