const defaultProps = { children: 'children', label: 'label' }
const handleNodeClick = (evt) => console.log('index', evt.detail)
		
<BeTree {data} props={defaultProps} on:nodeClick={handleNodeClick} />

	

		
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}
/>

	

		
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
/>

	

		
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]}
/>

	

		
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]}
/>

	

		
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]}
/>

	

		
  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}
/>