- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

### 基础用法

基础的树形结构展示。

    const defaultProps = { children: 'children', label: 'label' }
    const handleNodeClick = (evt) => console.log('index', evt.detail)

    <BeTree {data} props={defaultProps} on:nodeClick={handleNodeClick} />

显示代码

### 可选择

适用于需要选择层级时使用。

region1
region2
本例还展示了动态加载节点数据的方法。

    const defaultProps1 = { children: 'zones', label: 'name' }
    let count = 0
    const loadNode = (node, resolve) => {
      if (node.level === 0) {
        return resolve([{ name: 'region1' }, { name: 'region2' }]);
      }
      if (node.level > 3) return resolve([]);
      if (!resolve) return;
      let hasChild;
      if (node?.data?.name === 'region1') {
        hasChild = true;
      } else if (node?.data?.name === 'region2') {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
          let data;
        if (hasChild) {
          data = [{
            name: 'zone' + count++
          }, {
            name: 'zone' + count++
          }];
        } else {
          data = [];
        }

        resolve(data);
      }, 3500);
    }
    const handleCheckChange = (evt) => {
          console.log(evt);
    }

    <BeTree
      props={defaultProps1}
      load={loadNode}
      lazy
      showCheckbox
      on:nodeClick={handleNodeClick}
      on:checkChange={handleCheckChange}
    />

显示代码

### 懒加载自定义叶子节点

region
由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

    const defaultProps2 = {
      label: 'name',
      children: 'zones',
      isLeaf: 'leaf'
    };
    const loadNode2 = (node, resolve) => {
      if (node.level === 0) {
        return resolve([{ name: 'region' }]);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [{
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }];

        resolve(data);
      }, 500)
    }

    <BeTree
      props={defaultProps2}
      load={loadNode2}
      showCheckbox
      lazy
    />

显示代码

### 默认展开和默认选中

一级 1
一级 2
二级 2-1
二级 2-2
一级 3
二级 3-1
二级 3-2
分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

    let dataDefault = [{
      id: 1,
      label: '一级 1',
      children: [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }]

    <BeTree
      data={dataDefault}
      showCheckbox
      nodeKey="id"
      defaultExpandedKeys={[2, 3]}
      defaultCheckedKeys={[5, 7]}
    />

显示代码

### 禁用状态

可将 Tree 的某些节点设置为禁用状态

一级 2
二级 2-1
三级 3-1-1
三级 3-1-2
二级 2-2
三级 3-2-1
三级 3-2-2
通过disabled设置禁用状态。

    const data2 = [{
      id: 1,
      label: '一级 2',
      children: [{
        id: 3,
        label: '二级 2-1',
        children: [{
          id: 4,
          label: '三级 3-1-1'
        }, {
          id: 5,
          label: '三级 3-1-2',
          disabled: true
        }]
      }, {
        id: 2,
        label: '二级 2-2',
        disabled: true,
        children: [{
          id: 6,
          label: '三级 3-2-1'
        }, {
          id: 7,
          label: '三级 3-2-2',
          disabled: true
        }]
      }]
    }]

    <BeTree
      data={data2}
      showCheckbox
      nodeKey="id"
      defaultExpandedKeys={[2, 3]}
      defaultCheckedKeys={[5]}
    />

显示代码

### 树节点的选择

可将 Tree 的某些节点设置为禁用状态

一级 1
二级 1-1
三级 1-1-1
三级 1-1-2
一级 2
二级 2-1
二级 2-2
一级 3
二级 3-1
二级 3-2
通过disabled设置禁用状态。

    let data3 = [{
      id: 1,
      label: '一级 1',
      children: [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }];
    let theTree = null
    const getCheckedNodes = () => {
      console.log(theTree);
      console.log(theTree.getCheckedNodes());
    }
    const getCheckedKeys = () => {
      console.log(theTree.getCheckedKeys());
    }
    const setCheckedNodes = () => {
    	theTree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }])
      console.log('theTree', theTree);
    }
    const setCheckedKeys = () => {
    	theTree.setCheckedKeys([3])
    }
    const resetChecked = () => {
    	theTree.setCheckedKeys([])
    }

    <BeButton on:click={getCheckedNodes}>通过 node 获取</BeButton>
    <BeButton on:click={getCheckedKeys}>通过 key 获取</BeButton>
    <BeButton on:click={setCheckedNodes}>通过 node 设置</BeButton>
    <BeButton on:click={setCheckedKeys}>通过 key 设置</BeButton>
    <BeButton on:click={resetChecked}>清空</BeButton>
    <BeTree
      bind:this={theTree}
      data={data3}
      showCheckbox
      nodeKey="id"
      defaultExpandAll
      highlightCurrent
      defaultExpandedKeys={[2, 3]}
      defaultCheckedKeys={[5]}
    />

显示代码

### 节点过滤

通过关键字过滤树节点

一级 1
二级 1-1
三级 1-1-1
三级 1-1-2
一级 2
二级 2-1
二级 2-2
一级 3
二级 3-1
二级 3-2
在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filterNodeMethod，值为过滤函数。

      let theFilterTree = null
      let value = ''
      const filterText = () => {
    	  theFilterTree.filter(value)
      }
      const filterNodeMethod = (value, data) => {
    	  if (!value) return true;
    	  return data.label.indexOf(value) !== -1;
      }

    <BeInput bind:value placeholder="请输入内容" on:input={filterText} />
    <BeTree
    	bind:this={theFilterTree}
    	data={data3}
    	showCheckbox
    	nodeKey="id"
    	defaultExpandAll
    	highlightCurrent
    	defaultExpandedKeys={[2, 3]}
    	defaultCheckedKeys={[5]}
    	filterNodeMethod={filterNodeMethod}
    />

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
data | 展示数据 | array | — | —
emptyText | 内容为空的时候展示的文本 | String | — | —
nodeKey | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | — | label
props | 配置选项，具体看下表 | object | — | —
renderAfterExpand | 是否在第一次展开某个树节点后才渲染其子节点 | boolean | — | true
load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | function(node, resolve) | — | —
renderContent | 树节点的内容区的渲染 Function | Function(h, { node, data, store } | — | —
highlightCurrent | 是否高亮当前选中节点，默认值是 false。 | boolean | — | false
defaultExpandAll | 是否默认展开所有节点 | boolean | — | false
expandOnClickNode | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true
checkOnClickNode | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean | — | false
autoExpandParent | 展开子节点的时候是否自动展开父节点 | boolean | — | true
defaultExpandedKeys | 默认展开的节点的 key 的数组 | array | — | —
showCheckbox | 节点是否可被选择 | boolean | — | false
checkStrictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false
defaultCheckedKeys | 默认勾选的节点的 key 的数组 | array | — | —
currentNodeKey | 当前选中的节点 | string, number | — | —
filterNodeMethod | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | —
accordion(TODO) | 是否每次只打开一个同级树节点展开 | boolean | — | false
indent(TODO) | 相邻级节点间的水平缩进，单位为像素 | number | — | 16
iconClass(TODO) | 自定义树节点的图标 | string | - | -
lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false
draggable(TODO) | 是否开启拖拽节点功能 | boolean | — | false
allowDrag(TODO) | 判断节点能否被拖拽 | Function(node) | — | —
allowDrop(TODO) | 拖拽时判定目标节点能否被放置。`type` 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type) | — | —

### Props

参数 | 说明 | 类型
--- | --- | ---
label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | —
children | 指定子树为节点对象的某个属性值 | string | — | —
disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) | — | —
isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) | — | —

### Method

name | 说明 | 参数
--- | --- | ---
filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数
updateKeyChildren | 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性 | (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组
getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 `false` 2. 是否包含半选节点，默认值为 `false`
setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组
getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false`
setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `false`
setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false
getHalfCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点所组成的数组 | -
getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | -
getCurrentKey | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | —
getCurrentNode | 获取当前被选中节点的 data，若没有节点被选中则返回 null | —
setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点
setCurrentNode | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node
getNode | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data
remove | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性 | (data) 要删除的节点的 data 或者 node
append | 为 Tree 中的一个节点追加一个子节点 | (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
insertBefore | 为 Tree 的一个节点的前面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
insertAfter | 为 Tree 的一个节点的后面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
nodeClick | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
nodeContextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
checkChange | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check(TODO) | 当复选框被点击的时候触发 | 共两个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
currentChange(TODO) | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
nodeExpand | 节点被展开时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身