@aligov/block-tree

tree区块

Usage no npm install needed!

<script type="module">
  import aligovBlockTree from 'https://cdn.skypack.dev/@aligov/block-tree';
</script>

README

Tree区块

@aligov/block-tree

何时使用

block-tree区块，可用于左侧节点可选择树，右侧根据节点变化进行联动的table/其他的场景。

功能：

  • 左侧树，可进行增删改差
  • 右侧组件，可根据所选择节点进行联动
  • 外部不需要关注区块布局、节点状态

Install

tnpm install @aligov/block-tree --save

API

成员 说明 类型 默认值
hasSearch 是否有搜索框 boolean false
hasAdd 是否有添加按钮 boolean false
addBtnProps 添加按钮props IButtonProps { type:'primery' }
addBtnText 添加按钮文案 string 添加
defaultNode 默认选中节点 node 第一个节点
treeStyle 树样式 CSSProperties { margin-right: 10}
loadData 数据源异步加载函数 (node,pos)=>Promise func.noop
disabled 禁用 Boolean false
dataSource 数据源 [{ label: '节点名', children:[], hasAdd:true,hasDelete:true,key:'1' }] []
onChange 节点改变时回调函数 (node: any) => any func.noop
onAdd 添加节点回调函数 (node?:any)=>any func.noop
onDelete 删除节点回调函数 (node:any)=>any func.noop
onEdit 边界节点回调函数 (node:any)=>any func.noop