el-table表格渲染動態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案
更新時間：2025年06月18日 16:44:59 作者：立哥Sole
這篇文章主要介紹了el-table表格渲染動態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
因?yàn)槊總€人的表格樣式不一致，貼我的動態(tài)表格圖沒有意義，直接講解決方法和原理
介紹一下其他解決方法
同步里面使用 比如this.$nextick
這個是element的自帶方法 可自行看文檔
this.$refs.table.doLayout()
強(qiáng)制刷新 （很常見了）
this.$forceUpdate()
其他方法沒有效果 就只能給table加key值
key值可以給布爾值
因?yàn)閗ey需要唯一性，如果出現(xiàn)重復(fù)會出現(xiàn)問題
如果有多個表格，可以組合給key 總之避免重復(fù)
<el-table ref="table" :data="data" :key="key"></el-table>
舉例演示：
// 在數(shù)據(jù)變化的地方
changeFn(){
this.key = ! this.key
}這樣就可以更新table視圖了
當(dāng)然，我們還可以做到給el-table-column加key值 不需要給table加也行
因?yàn)椴皇钦麄€表頭都是需要渲染的，所以如果是一個兩個 可以給el-table-column加key值
更新的時候會閃一下很正常，畢竟是重新渲染表格，動態(tài)渲染的
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何通過Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請求跨域(vue-cli)
從A頁面訪問到B頁面,并且要獲取到B頁面上的數(shù)據(jù),而兩個頁面所在的端口、協(xié)議和域名中哪怕有一個不對等,那么這種行為就叫跨域,這篇文章給大家介紹如何通過Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請求跨域(vue-cli),感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了阿望教你用vue寫掃雷小游戲，本文通過實(shí)例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
Vue項(xiàng)目引入translate.js國際化自動翻譯組件的方法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目引入translate.js國際化自動翻譯組件的相關(guān)資料,除了基本的文本翻譯功能之外,jstranslate還提供了一些高級功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家介紹了vue3與ts組件封裝提高代碼復(fù)用性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
TinyMCE是一款易用、且功能強(qiáng)大的所見即所得的富文本編輯器,跟其他富文本編輯器相比,有著豐富的插件,支持多種語言,能夠滿足日常的業(yè)務(wù)需求并且免費(fèi),本文小編給大家詳細(xì)介紹了Vue中tinymce富文本功能配置,需要的朋友可以參考下2023-11-11
利用Vue實(shí)現(xiàn)數(shù)字翻滾動畫效果展示
這篇文章主要介紹了利用Vue實(shí)現(xiàn)數(shù)字翻滾動畫效果,通過Vue的響應(yīng)式數(shù)據(jù)更新結(jié)合CSS3的動畫效果,我們可以實(shí)現(xiàn)非?？犰诺臄?shù)字翻滾效果,給數(shù)據(jù)可視化帶來更多動感和吸引力,需要的朋友參考下吧2024-04-04