Element UI是一套基于Vue.js的組件庫,其中的Tree控件不僅可以通過靜態數據展示樹形結構,還可以通過JSON動態加載樹形數據。
使用JSON作為Tree控件的數據源,需要在數據中給出每一個節點的基本信息,例如節點名稱,節點ID,父節點ID等等。下面是一個簡單的JSON數據示例:
{ "id": 1, "label": "一級菜單1", "children": [ { "id": 2, "label": "二級菜單1", "parentId": 1, "children": [ { "id": 3, "label": "三級菜單1", "parentId": 2 }, { "id": 4, "label": "三級菜單2", "parentId": 2 } ] }, { "id": 5, "label": "二級菜單2", "parentId": 1 } ] }
如上所示的JSON數據中,節點的基本信息均以鍵值對的形式出現。其中,每個節點都包含“id”、“label”這兩個基本屬性。同時,如果節點是其它節點的子節點,那么就需要在該節點中指定其“parentId”屬性。如果該節點沒有子節點,那么就不需要再為該節點指定“children”屬性。
使用Element UI中的Tree控件展示JSON數據非常簡單。只需要將JSON數據傳入“data”屬性中即可。下面是一個簡單的Tree控件使用示例:
如上所示,僅需將jsonData數據傳給ElTree控件,即可實現將JSON數據展示成樹形結構的效果。