vue element-ui table expand-change實現不同等級圖標設置

element-ui table中有樹形數據表格,在使用的時候想給不同等級的數據添加不同的 icon,改怎麼操作呢?
如果只有兩種 iocn的話還好說,一般是給個字段用 v-if 判斷一下就行了。但是我們需求是文件夾摺疊和打開和最子元素,三種用不同的 icon,如圖:

最原始沒打開的文件夾 icon
原始

打開後的文件夾以及最子級的文件:
打開後
監聽 table的 expand-change時事件:監聽
用v-if判斷顯示哪一個圖標:
圖標

children 是子級,用children判斷子級的長度。然後在事件監聽中給 row設置一個記錄當前是否點開的屬性:
屬性
就可以實現目標效果了,希望本文對您有所幫助。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章