element el-table列 顯示隱藏的問題


注:只是記錄一次自己遇到的一個自己給自己埋坑的 經歷
領導給了一個需求,需要對表格的列 根據不同的條件做判斷顯示隱藏  

當時自己以為這個需求很簡單, 這不是就是一個v-show 的事情嗎 然后 我就使用v-show 但是最后發現並沒有什么效果 當時是傻眼了 后來去找度娘 才知道 

 

 

 v-show的本質 就是對dom元素 設置display:none  但是td設置的display:table-cell  並且權限層級高於display:none 所以v-show 不會有效果

 

v-show不行 那就用v-if 吧 然后當時有很多列都用了v-if,試了一下,效果實現了 

但是自己后來調試的時候發現 頻繁操作表格  表格的數據列就混亂了 。。。。。

當時以為這個bug 沒救了 但是沒辦法 領導催着要 只能繼續想辦法 后來看了相關資料,才知道

 

給el-table,設置一個key屬性,這個問題就完美解決。這個是因為el-table做了一些優化,可以復用列(這個在android開發中的ListView 復用item的原理是一樣的),不加key,就成了bug. 然后當時我就對列加了:key="Math.random()"

 

然后當時以為就好了 。然后提交 萬事大吉 結果測試人員發現   要是一個頁面上 有兩個這樣的表格  在操作表格的按鈕時, 有一個表格就會閃動一下,界面操作效果十分不好 。沒辦法 ,繼續改

 

繼續想辦法。 用v-if 就是為了實現條件判斷,然后加隨機數就是為了解決多個v-if 的顯隱導致的表格列錯亂  那問題點就是我表格用了多個v-if   我把判斷條件精簡一點 ,會不會好點 

 

后來自己試了一下 精簡了條件 然后用一個div盒子包裹相同的條件 然后調試發現 表格列還是會出現 錯亂的問題 當時以為這個方法行不通了 ,后來一想 我換成template 試下 (當時已經不抱什么希望了)

 


但是最后發現 換成template 包裹是可以的 表格數據列不會錯亂,多個類似的表格渲染也不會出現表格閃動的問題

(菜雞填坑, 寫的不好,各位大佬見諒 )

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM