通过折叠面板收纳内容区域
可同时展开多个面板,面板之间不影响
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' />
动态加载节点数据的方法
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}
/>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 标题 | string | - | '' |
事件名称 | 说明 | 回调参数 |
---|---|---|
close | 关闭的回调 | '' |
name | 说明 |
---|---|
icon | 标题前的icon |