@aligov/tree

支持搜索/编辑/删除等功能的树

Usage no npm install needed!

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

README

增强型树组件

@aligov/tree

支持搜索/编辑/删除等功能的树, 基于 Fusion Design Tree 组件深度定制。

API

Tree

其他功能 API 参考 Fusion Design 的 Tree 组件。

参数名 说明 必填 类型 默认值 备注
onAdd 添加按钮回调 Function
onDelete 删除按钮回调 Function
onEdit 编辑按钮回调 Function
customIcons 自定义Icon Array []
onCeXXXX 自定义Icon 对应的点击回调 Function

Datasource

基于 Fusion 的 官方 DataSource 进行拓展

{
    /* 官方参数不额外罗列 */
    label: "目录1",
    key: "xxx",
    hasAdd: true, // 控制 add 是否显示
    hasDelete: false, // 控制 delete 是否显示
    hasEdit: false, // 控制 edit 是否显示
    hasCeXXX: true, // 控制 customIcons 中自定义的 icon 是否显示
    children: [/* 子节点 */],
}

ICustomIcon

interface ICustomIcon {
  name: string;
  icon: string;
}

icon 参数为 fusion icon 的 type。

name 字段会先通过 pascal-case 转换一次, 再统一添加前缀 Ce(CustomIcons)以避免和其他参数冲突, 然后根据格式化以后的name 生成 hasCeXXX 和 onCeXXX 。

例如: showInfo => CeShowInfo => hasCeShowInfo/onCeShowInfo