el-table表格渲染動態(tài)表頭,數據更新視圖不變化的解決方案
更新時間：2025年06月18日 16:44:59 作者：立哥Sole
這篇文章主要介紹了el-table表格渲染動態(tài)表頭,數據更新視圖不變化的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
因為每個人的表格樣式不一致，貼我的動態(tài)表格圖沒有意義，直接講解決方法和原理
介紹一下其他解決方法
同步里面使用 比如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值
更新的時候會閃一下很正常，畢竟是重新渲染表格，動態(tài)渲染的
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如何通過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是一款易用、且功能強大的所見即所得的富文本編輯器,跟其他富文本編輯器相比,有著豐富的插件,支持多種語言,能夠滿足日常的業(yè)務需求并且免費,本文小編給大家詳細介紹了Vue中tinymce富文本功能配置,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了利用Vue實現數字翻滾動畫效果,通過Vue的響應式數據更新結合CSS3的動畫效果,我們可以實現非常酷炫的數字翻滾效果,給數據可視化帶來更多動感和吸引力,需要的朋友參考下吧2024-04-04