注:只是記錄一次自己遇到的一個自己給自己埋坑的 經歷
領導給了一個需求,需要對表格的列 根據不同的條件做判斷顯示隱藏
當時自己以為這個需求很簡單, 這不是就是一個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 包裹是可以的 表格數據列不會錯亂,多個類似的表格渲染也不會出現表格閃動的問題
(菜雞填坑, 寫的不好,各位大佬見諒 )
