代码拉取完成,页面将自动刷新
一个简陋的树型数据工具
只是个人项目,整体较为随便,作为开发途中的经验总结,如有相似的需求,推荐copy或阅读源码,不建议将该包在实际项目中使用
如有幸被实际使用在项目内,不胜荣幸
灵感是treemate
围绕树状数据解析,总结使用一些组件库的tree组件时的通用业务
一开始想到了使用 naiveui 团队开源的 treemate
但treemate无法做到在递归时自定义一些行为
并且个人需求只是围绕树状数据解析
这个简陋至极的包也因此孕育而生
/**
* 一个占位,返回空空如也的模型
*/
createInitVoidTree()
/**
* 通过一个单层列表构造树状结构
* [{
* id: 0,
* parentId: -1
* }]
* 需拥有类似的数据结构
*/
createVoidTreeByList()
/**
* 构造树状模型
*/
createVoidTree()
interface TreeNode<Raw extends Record<string, any>> {
key: Key;
label: string;
raw: Raw;
level: number;
index: number;
parent?: TreeNode<Raw>;
disabled: boolean;
isLeaf: boolean;
path: Key[];
siblings: Array<TreeNode<Raw>>;
children?: Array<TreeNode<Raw>>;
[key: string]: any;
}
declare class VoidTree<Raw> {
/**
* 处理后对外展示的数据
*/
treeNodes: TreeNode<Raw>[];
/**
* 自定义的一些缓存
*/
cache: TreeCache<Raw>;
/**
* 选择的key值
*/
checkKeys: Key[];
constructor(treeNodes: TreeNode<Raw>[], cache: TreeCache<Raw>);
/**
* 获取某项缓存
* @param key
*/
getCache(key: string): any;
/**
* 获取key-node 结构的Map数据
*/
get treeNodeMap(): Map<Key, TreeNode<Raw>>;
/**
* 通过key获取单个节点信息
* @param key
*/
getNode(key: Key): TreeNode<Raw> | undefined;
/**
* 通过多个key获取多个节点信息
* @param key
* @param ignoreEmpty
*/
getNodes(key: Key | Key[], ignoreEmpty?: boolean): TreeNode<Raw>[];
/**
* 获取子节点
* @param key
*/
getChild(key: Key): TreeNode<Raw>[] | undefined;
/**
* 获取父节点
* @param key
*/
getParent(key: Key): TreeNode<Raw> | undefined;
/**
* 选择
* @param key
*/
check(key: Key | Key[]): void;
/**
* 选择
* @param key
*/
uncheck(key: Key | Key[]): void;
/**
* 选择
* @param key
*/
updateCheckKeys(key: Key | Key[]): void;
/**
* 自定义选择
* @param fn
*/
customUpdateCheckKeys(fn: (self: VoidTree<Raw>) => Key | Key[]): void;
/**
* 搜索
* 解决一些组件库tree搜索不会筛选数据,而是加下划线
* 方法改写自naiveui
* @param keyword
* @param filter
*/
search(keyword: string, filter?: (pattern: string, v: string) => boolean): void;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。