- 快速开始
- 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 示例

## SelectTree 树形选择框

通过折叠面板收纳内容区域

### 基本用法

可同时展开多个面板，面板之间不影响

value: [5]

1. data: string[] = [] // 树形数据
2. value: string[] = ['1'] // 绑定的value
3. clearable true // 显示清除按钮
4. placeholder=请选择 // 默认提示
5. change // value改变的回调
6. nodeKey // label的指向

7.     defaultProps = { children: 'children', label: 'label' }

    import { BeSelectTree } from '@brewer/beerui'
    let value = [1];

    const handleChange = (val) => {
    	console.log(val);
    };
    const defaultProps = { children: 'children', label: 'label1' }

    <BeSelectTree defaultProps={defaultProps} bind:data={data} bind:value={value} on:change={handleChange} nodeKey='id' />

显示代码

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

动态加载节点数据的方法

value: [5]

1. lazy // 开启懒加载
2. load // 懒加载数据的方法

    let count = 1
    const props = {
    	label: 'name',
    	children: 'zones'
    }
    const loadNode = (node, resolve) => {
    	if (node.level === 0) {
    		return resolve([{ name: 'region1' }, { name: 'region2' }]);
    	}
    	if (node.level > 3) return resolve([]);

    	var hasChild;
    	if (node.data.name === 'region1') {
    		hasChild = true;
    	} else if (node.data.name === 'region2') {
    		hasChild = false;
    	} else {
    		hasChild = Math.random() > 0.5;
    	}

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

    		resolve(data);
    	}, 500);
    };

    <BeSelectTree
    	lazy
    	load={loadNode}
    	bind:value={value}
    	defaultProps={props}
    />

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
title | 标题 | string | - | ''

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
close | 关闭的回调 | ''

### Slot

name | 说明
--- | ---
icon | 标题前的icon