el-table表格渲染動(dòng)態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案
更新時(shí)間：2025年06月18日 16:44:59 作者：立哥Sole
這篇文章主要介紹了el-table表格渲染動(dòng)態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
因?yàn)槊總€(gè)人的表格樣式不一致，貼我的動(dòng)態(tài)表格圖沒有意義，直接講解決方法和原理
介紹一下其他解決方法
同步里面使用 比如this.$nextick
這個(gè)是element的自帶方法 可自行看文檔
this.$refs.table.doLayout()
強(qiáng)制刷新 （很常見了）
this.$forceUpdate()
其他方法沒有效果 就只能給table加key值
key值可以給布爾值
因?yàn)閗ey需要唯一性，如果出現(xiàn)重復(fù)會(huì)出現(xiàn)問題
如果有多個(gè)表格，可以組合給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)椴皇钦麄€(gè)表頭都是需要渲染的，所以如果是一個(gè)兩個(gè) 可以給el-table-column加key值
更新的時(shí)候會(huì)閃一下很正常，畢竟是重新渲染表格，動(dòng)態(tài)渲染的
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE?el-table列表搜索功能純前端實(shí)現(xiàn)方法
Vue表搜索是指在Vue應(yīng)用中實(shí)現(xiàn)對(duì)表格數(shù)據(jù)的搜索功能,下面這篇文章主要給大家介紹了關(guān)于VUE?el-table列表搜索功能純前端實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個(gè)Vue-element-admin中的流程可能對(duì)于新的同學(xué)不是很友好，所以本文將結(jié)合實(shí)例代碼，介紹Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue cli3適配所有端方案的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue+iview+less+echarts實(shí)戰(zhàn)項(xiàng)目總結(jié)
本篇文章是作者通過學(xué)習(xí)vue+iview+less+echarts制作一個(gè)小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學(xué)習(xí)參考。2018-02-02
Vue3自動(dòng)引入組件與組件庫的方法實(shí)例
關(guān)于vue?組件還是非常好用的,真正掌握預(yù)計(jì)需要一段時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue3自動(dòng)引入組件與組件庫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02