Tree

介紹使用 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