Tree
介紹使用 Tree 樹狀組織元件

Tree 樹狀組織,顯示一系列相關且有組織層級的資料,可以選擇某些節點,常用於過濾資訊。
範例
<bpa-tree
:data="treeData"
/>
treeData: [
{
id: 1,
label: "A",
children: [
{
id: 4,
label: "D"
},
{
id: 5,
label: "E"
}
]
},
{
id: 2,
label: "B",
children: [
{
id: 6,
label: "F"
},
{
id: 7,
label: "G",
children: [
{
id: 8,
label: "H"
},
{
id: 9,
label: "I"
}
]
}
]
},
{
id: 3,
label: "C",
}
]
附加 Checkbox 形式
<bpa-tree
:data="treeData"
show-checkbox
/>
展開全部節點
<bpa-tree
:data="treeData"
default-expand-all
/>
Tree 屬性
Name
Value
Type
Default
Required
Note
data
Array
label
String
show-checkbox
Boolean
false
可以勾選節點
default-expand-all
Boolean
false
預設展開所有節點
Treenode 屬性
Name
Value
Type
Default
Required
Note
id
Number
label
String || Number
children
Array
disabled
Boolean
false
Tree 方法
Name
Parameters
Desciption
getCheckedNodes
Array
回傳選擇的節點
getCheckedKeys
Array
回傳選擇的節點 key(id)
setCheckedNodes
Array
使用 key(id) (Object) 設置被勾選的節點
setCheckedKeys
Array
使用 key(id) 設置被勾選的節點
resetChecked
清除所有勾選節點
Tree 事件
Name
Parameters
Desciption
node-check
(data, component)
勾選/取消勾選節點
node-click/node-expand
(data, component)
當節點被勾選/展開
Demo
Last updated
Was this helpful?