# Tree

<div data-full-width="false"><figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2FfRWrTxGLI06wzoUjVonf%2Ftree.webp?alt=media&#x26;token=0887a47c-b32e-41f4-81d1-4350e87c31ba" alt="Radio 介紹示意圖"><figcaption><p>Tree 介紹示意圖</p></figcaption></figure></div>

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

### 範例 <a href="#example" id="example"></a>

```html
<bpa-tree
  :data="treeData"
/>
```

```javascript
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 形式 <a href="#checkbox" id="checkbox"></a>

```html
<bpa-tree
  :data="treeData"
  show-checkbox
/>
```

### 展開全部節點 <a href="#expanded-all" id="expanded-all"></a>

```html
<bpa-tree
  :data="treeData"
  default-expand-all
/>
```

### Tree 屬性 <a href="#tree-props" id="tree-props"></a>

<table data-full-width="false"><thead><tr><th width="187">Name</th><th width="161">Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>data</td><td></td><td>Array</td><td></td><td>false</td><td></td></tr><tr><td>label</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>show-checkbox</td><td></td><td>Boolean</td><td>false</td><td>false</td><td>可以勾選節點</td></tr><tr><td>default-expand-all</td><td></td><td>Boolean</td><td>false</td><td>false</td><td>預設展開所有節點</td></tr></tbody></table>

### Treenode 屬性 <a href="#treenode-props" id="treenode-props"></a>

<table data-full-width="false"><thead><tr><th width="136">Name</th><th width="161">Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>id</td><td></td><td>Number</td><td></td><td>false</td><td></td></tr><tr><td>label</td><td></td><td>String || Number</td><td></td><td>false</td><td></td></tr><tr><td>children</td><td></td><td>Array</td><td></td><td>false</td><td></td></tr><tr><td>disabled</td><td></td><td>Boolean</td><td>false</td><td>false</td><td></td></tr></tbody></table>

### Tree 方法 <a href="#tree-methods" id="tree-methods"></a>

<table data-full-width="false"><thead><tr><th width="255">Name</th><th width="227">Parameters</th><th>Desciption</th></tr></thead><tbody><tr><td>getCheckedNodes</td><td>Array</td><td>回傳選擇的節點</td></tr><tr><td>getCheckedKeys</td><td>Array</td><td>回傳選擇的節點 key(id)</td></tr><tr><td>setCheckedNodes</td><td>Array</td><td>使用 key(id) (Object) 設置被勾選的節點</td></tr><tr><td>setCheckedKeys</td><td>Array</td><td>使用 key(id) 設置被勾選的節點</td></tr><tr><td>resetChecked</td><td></td><td>清除所有勾選節點</td></tr></tbody></table>

### Tree 事件 <a href="#tree-event" id="tree-event"></a>

<table data-full-width="false"><thead><tr><th width="254">Name</th><th width="229">Parameters</th><th>Desciption</th></tr></thead><tbody><tr><td>node-check</td><td>(data, component)</td><td>勾選/取消勾選節點</td></tr><tr><td>node-click/node-expand</td><td>(data, component)</td><td>當節點被勾選/展開</td></tr></tbody></table>

### Demo

{% embed url="<https://codesandbox.io/embed/4qdx4c?hidenavigation=1&module=/src/app.vue&view=Editor+++Preview>" fullWidth="false" %}