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自带服务器实现Ajax请求跨域(vue-cli)
从A页面访问到B页面,并且要获取到B页面上的数据,而两个页面所在的端口、协议和域名中哪怕有一个不对等,那么这种行为就叫跨域,这篇文章给大家介绍如何通过Vue自带服务器实现Ajax请求跨域(vue-cli),感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了解决.vue文件url引用文件的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要为大家详细介绍了vue实现验证码倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue使用leafLet方式(绘图工具),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了阿望教你用vue写扫雷小游戏，本文通过实例代码效果图展示的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
Vue项目引入translate.js国际化自动翻译组件的方法
这篇文章主要给大家介绍了关于Vue项目引入translate.js国际化自动翻译组件的相关资料,除了基本的文本翻译功能之外,jstranslate还提供了一些高级功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了基于Vuejs实现购物车功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家介绍了vue3与ts组件封装提高代码复用性示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费,本文小编给大家详细介绍了Vue中tinymce富文本功能配置,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了利用Vue实现数字翻滚动画效果,通过Vue的响应式数据更新结合CSS3的动画效果,我们可以实现非常酷炫的数字翻滚效果,给数据可视化带来更多动感和吸引力,需要的朋友参考下吧2024-04-04
最新评论