色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

element ui tree json

傅智翔2年前8瀏覽0評論

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數據展示成樹形結構的效果。