Vue el-table表頭上引入組件不能實時傳參解決方法分析
場景還原
產品要求：點擊表格的表頭，能觸發(fā)一個下拉的列表，列表能攜帶表格的篩選條件，獲取相應的數據
寫了一個demo，來還原一下bug出現的場景：
<div id="demo">
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
width="180"
>
<template slot="header">
<city-component
:params="paramsData"
></city-component>
</template>
</el-table-column>
</el-table>
</div>
data: {
tableData: [], // 表格數據
paramsData: {} // 傳遞給組件的數據
},
methods: {
// 改變paramsData函數
changeParamsDataFn() {
this.paramsData = date.now().getTime();
}
}
在el-table表格的表頭中，引入組件 city-component，需要將數據paramsData傳遞給組件使用。
第一次進入頁面時，paramsData第一次被初始化賦值，DOM渲染el-table完成后，是可以正常使用；但若是需要更改paramsData的值，并且同步傳遞給city-component組件使用時，打印paramsData的值，是可以看到改值的變化，但是組件卻無法接受到變化后的paramsData的值
解決方法
（1）給el-table加上一個 :key=tableKeyValue
（2）在改變paramsData后，改變 tableKeyValue的值
<el-table :key="tableKeyValue" > <!-- 其他跟上面一致 --> </el-table>
methods: {
changeParamsDataFn() {
this.tableKeyValue = "city" + date.noe();
}
}
出現原因
這就得先說說，Vue的渲染機制：虛擬DOM+diff算法
- 根據初始DOM生成舊虛擬DOM；所以使用虛擬DOM的缺點之一便是第一次打開頁面，需要更多的時間
- 當有了修改數據的操作時，便會生成新的DOM樹
- diff算法就會比較新/舊DOM樹，找出變更的DOM
- 將改動的DOM，渲染成真實的DOM；有個優(yōu)點便是，每次變更DOM，不需要從頭到尾查詢每一個DOM，只需要找出變更的地方就可
因為表格的DOM沒有變化，數據改變后，修改后的DOM與原來的DOM一致，無法重新渲染表格。雖然我們能打印出數據的變化，但是無法將數據傳入組件。
加上key值，是為了數據改變的同時，改變table的key值，diff算法就能找出前后表格DOM的不同，就能重新渲染表格，重新把值傳入組件
似乎也可以將key值，加在引入組件的單元格上，沒有真正寫過，下次遇到這類問題可以試試
到此這篇關于Vue el-table表頭上引入組件不能實時傳參解決方法分析的文章就介紹到這了,更多相關Vue el-table引入組件實時傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue 添加和編輯用同一個表單,el-form表單提交后清空表單數據操作
這篇文章主要介紹了vue 添加和編輯用同一個表單,el-form表單提交后清空表單數據操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本篇文章主要介紹了Vue學習筆記之表單輸入綁定，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
如果在組件中需要使用定時器,注意在銷毀組件的時候,要對定時器進行銷毀,否則時間長了會導致頁面卡頓,這篇文章給大家介紹vue3 setup語法糖下的定時器的使用與銷毀的知識,感興趣的朋友一起看看吧2024-02-02
今天小編就為大家分享一篇在VUE中實現文件下載并判斷狀態(tài)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue2.0 http請求以及l(fā)oading展示實例
下面小編就為大家分享一篇Vue2.0 http請求以及l(fā)oading展示實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue+Koa2+mongoose寫一個像素繪板的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue組件庫的在線主題編輯器的實現思路，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
使用element-ui table expand展開行實現手風琴效果
這篇文章主要介紹了使用element-ui table expand展開行實現手風琴效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
axios請求頭設置常見Content-Type和對應參數的處理方式
這篇文章主要介紹了axios請求頭設置常見Content-Type和對應參數的處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
nginx是一個高性能的HTTP和反向代理服務器。這篇文章主要介紹了vue.js項目nginx部署,需要的朋友可以參考下2018-04-04