arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Tree

介紹使用 Tree 樹狀組織元件

Tree 介紹示意圖

Tree 樹狀組織,顯示一系列相關且有組織層級的資料,可以選擇某些節點,常用於過濾資訊。

hashtag
範例

hashtag
附加 Checkbox 形式

hashtag
展開全部節點

hashtag
Tree 屬性

Name
Value
Type
Default
Required
Note

hashtag
Treenode 屬性

Name
Value
Type
Default
Required
Note

hashtag
Tree 方法

Name
Parameters
Desciption

hashtag
Tree 事件

Name
Parameters
Desciption

hashtag
Demo

<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",
  }
]

String

show-checkbox

Boolean

false

可以勾選節點

default-expand-all

Boolean

false

預設展開所有節點

String || Number

children

Array

disabled

Boolean

false

resetChecked

清除所有勾選節點

data

Array

label

id

Number

label

getCheckedNodes

Array

回傳選擇的節點

getCheckedKeys

Array

回傳選擇的節點 key(id)

setCheckedNodes

Array

使用 key(id) (Object) 設置被勾選的節點

setCheckedKeys

Array

使用 key(id) 設置被勾選的節點

node-check

(data, component)

勾選/取消勾選節點

node-click/node-expand

(data, component)

當節點被勾選/展開

Radio 介紹示意圖

<bpa-tree
  :data="treeData"
  show-checkbox
/>
<bpa-tree
  :data="treeData"
  default-expand-all
/>