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?el-table列表搜索功能純前端實(shí)現(xiàn)方法
Vue表搜索是指在Vue應(yīng)用中實(shí)現(xiàn)對表格數(shù)據(jù)的搜索功能,下面這篇文章主要給大家介紹了關(guān)于VUE?el-table列表搜索功能純前端實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個Vue-element-admin中的流程可能對于新的同學(xué)不是很友好，所以本文將結(jié)合實(shí)例代碼，介紹Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue cli3適配所有端方案的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue+iview+less+echarts實(shí)戰(zhàn)項目總結(jié)
本篇文章是作者通過學(xué)習(xí)vue+iview+less+echarts制作一個小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學(xué)習(xí)參考。2018-02-02
關(guān)于vue?組件還是非常好用的,真正掌握預(yù)計需要一段時間,下面這篇文章主要給大家介紹了關(guān)于Vue3自動引入組件與組件庫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面打印自動分頁的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02