el-table表格渲染动态表头,数据更新视图不变化的解决方案
更新时间：2025年06月18日 16:44:59 作者：立哥Sole
这篇文章主要介绍了el-table表格渲染动态表头,数据更新视图不变化的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
因为每个人的表格样式不一致，贴我的动态表格图没有意义，直接讲解决方法和原理
介绍一下其他解决方法
同步里面使用 比如this.$nextick
这个是element的自带方法 可自行看文档
this.$refs.table.doLayout()
强制刷新 （很常见了）
this.$forceUpdate()
其他方法没有效果 就只能给table加key值
key值可以给布尔值
因为key需要唯一性，如果出现重复会出现问题
如果有多个表格，可以组合给key 总之避免重复
<el-table ref="table" :data="data" :key="key"></el-table>
举例演示：
// 在数据变化的地方
changeFn(){
this.key = ! this.key
}这样就可以更新table视图了
当然，我们还可以做到给el-table-column加key值 不需要给table加也行
因为不是整个表头都是需要渲染的，所以如果是一个两个 可以给el-table-column加key值
更新的时候会闪一下很正常，毕竟是重新渲染表格，动态渲染的
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue表搜索是指在Vue应用中实现对表格数据的搜索功能,下面这篇文章主要给大家介绍了关于VUE el-table列表搜索功能纯前端实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue组件渲染与更新实现过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
这篇文章主要介绍了详解vue实现坐标拾取器功能示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Vue-Element-Admin集成自己的接口实现登录跳转
关于这个Vue-element-admin中的流程可能对于新的同学不是很友好，所以本文将结合实例代码，介绍Vue-Element-Admin集成自己的接口实现登录跳转，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了vue cli3适配所有端方案的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
本篇文章是作者通过学习vue+iview+less+echarts制作一个小系统后，做的心得以及遇到的坑的总结，值得大家学习参考。2018-02-02
关于vue 组件还是非常好用的,真正掌握预计需要一段时间,下面这篇文章主要给大家介绍了关于Vue3自动引入组件与组件库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了vue实现页面打印自动分页的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文主要介绍了Vue实现全局菜单搜索框的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论