@clunch/tree v0.1.0

tree

树图组件，包括矩形、圆形等常见的树图。

如何使用？

首先，需要安装npm包（目前我们仅支持npm方式管理）：

npm install --save clunch @clunch/tree

然后注册组件：

import Clunch from 'clunch';
import tree from '@clunch/tree';

Clunch.series('ui-tree',tree);

然后，你就可以使用这个组件了：

<ui-tree data='json' />

• data:数据，可以是任意格式（比如：[{name:"",children:[...]},...] 默认支持，别的格式需要额外配置解析方法）

除了上面的必输项外，还有下列可选项：

【数据格式format】

因为用户提供的原始数据可能不是按照我们设计的格式提供，为了兼容所有的数据格式，我们提供了format配置项用以告诉组件你的数据应该如何解析：

format:{
    "root":function(initTree){ /*返回根结点*/ },
    "id":function(treedata){ /*返回id*/ },
    "child":function(parentTree, initTree){ /*返回孩子结点*/ }
}

你一共可以配置三项，分别用以告诉我们哪个是根节点、一个结点的唯一标识如何生成和如何获取孩子结点。

比如我们内置数据格式的话，可以这样配置：

// 默认配置
format:{
    "root":function(initTree){  return initTree; },
    "id":function(treedata){ return treedata.name; },
    "child":function(parentTree, initTree){ return parentTree.children; }
}

上面三项均可选，你只需要配置和默认数据格式解析不一样的项即可，无需全部配置。

由于此组件是基于Clunch开发的，我们默认你已经掌握了相关知识。

<< 你可以点击此处学习Clunch.js如何使用

开源协议

MIT

Copyright (c) 2021 hai2007 走一步，再走一步。