{"id":17137868,"url":"https://github.com/tower1229/vue-giant-tree","last_synced_at":"2025-05-16T01:07:23.159Z","repository":{"id":37706534,"uuid":"200999429","full_name":"tower1229/Vue-Giant-Tree","owner":"tower1229","description":"🌳 巨树：基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染。","archived":false,"fork":false,"pushed_at":"2024-03-08T10:39:21.000Z","size":2375,"stargazers_count":673,"open_issues_count":22,"forks_count":169,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-16T01:07:16.962Z","etag":null,"topics":["vue-ztree","ztree","ztree-vue"],"latest_commit_sha":null,"homepage":"http://refined-x.com/Vue-Giant-Tree/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tower1229.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-07T07:43:52.000Z","updated_at":"2025-05-14T16:33:33.000Z","dependencies_parsed_at":"2024-06-18T13:47:58.084Z","dependency_job_id":"053a8cc1-50b4-4b4d-81cf-4c2850125578","html_url":"https://github.com/tower1229/Vue-Giant-Tree","commit_stats":{"total_commits":24,"total_committers":2,"mean_commits":12.0,"dds":0.08333333333333337,"last_synced_commit":"2785d7b98ca9e0a232e49d4333c667b0bd35f8d5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tower1229%2FVue-Giant-Tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tower1229%2FVue-Giant-Tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tower1229%2FVue-Giant-Tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tower1229%2FVue-Giant-Tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tower1229","download_url":"https://codeload.github.com/tower1229/Vue-Giant-Tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue-ztree","ztree","ztree-vue"],"created_at":"2024-10-14T20:08:09.633Z","updated_at":"2025-05-16T01:07:18.150Z","avatar_url":"https://github.com/tower1229.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-giant-tree\n\n[![npm](https://img.shields.io/npm/v/vue-giant-tree.svg)](https://www.npmjs.com/package/vue-giant-tree/) [![license](https://img.shields.io/github/license/tower1229/vue-giant-tree.svg)]()\n\n\u003e :deciduous_tree: 巨树：基于[ztree](https://github.com/zTree/zTree_v3)封装的 Vue 树形组件，轻松实现海量数据的高性能渲染。\n\n![logo](https://refined-x.com/asset/vgt-preview.png)\n\nVue3.x 版本[在这](https://github.com/tower1229/Vue-Giant-Tree/tree/vue3)\n\n## 为什么需要 vue-giant-tree\n\nVue 的数据监听机制决定了在大数据量场景下的渲染性能非常低下，基于 Vue 实现的常规树组件几乎无法胜任上万条数据的高性能渲染，在 IE 浏览器（即便是 IE11）中很容易导致页面卡死甚至浏览器崩溃。\n\n\u003e 不服气可以试试这份数据 [big-tree.json](http://refined-x.com/Vue-Giant-Tree/mock/big-tree.json)\n\n为了摆脱数据监听，只能放弃通过 Vue 渲染，采用常规 DOM 操作的方式。在这个领域[ztree](https://github.com/zTree/zTree_v3)是当之无愧最成熟的方案，因此 vue-giant-tree 直接基于 ztree 做上层封装，以组件的形式将 ztree 的配置和事件暴露出来，使其可以方便的在 Vue 项目中安装使用。\n\nvue-giant-tree 仅仅是给 ztree 套了一层 Vue 组件的壳，顺便提供了一套更现代化的皮肤，因为主打大数据量场景，所以取名**巨树**。\n\nztree 在性能优化方面已经做到了近乎极致，感谢 ztree 作者的工作，向您致敬！\n\n## 安装\n\n```bash\nnpm i vue-giant-tree --save\n```\n\n**注意：组件依赖 jQuery，务必在页面中提前加载 jQuery**\n\n```\n\u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\n    integrity=\"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n## 使用\n\nin script:\n\n```javascript\nimport tree from \"vue-giant-tree\";\n\nexport default {\n\tcomponents: {\n          tree\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tnodes: [\n                    { id:1, pid:0, name:\"随意勾选 1\", open:true},\n                    { id:11, pid:1, name:\"随意勾选 1-1\", open:true},\n                    { id:111, pid:11, name:\"随意勾选 1-1-1\"},\n                    { id:112, pid:11, name:\"随意勾选 1-1-2\"},\n                    { id:12, pid:1, name:\"随意勾选 1-2\", open:true},\n                    { id:121, pid:12, name:\"随意勾选 1-2-1\"},\n                    { id:122, pid:12, name:\"随意勾选 1-2-2\"},\n                    { id:2, pid:0, name:\"随意勾选 2\", checked:true, open:true},\n                    { id:21, pid:2, name:\"随意勾选 2-1\"},\n                    { id:22, pid:2, name:\"随意勾选 2-2\", open:true},\n                    { id:221, pid:22, name:\"随意勾选 2-2-1\", checked:true},\n                    { id:222, pid:22, name:\"随意勾选 2-2-2\"},\n                    { id:23, pid:2, name:\"随意勾选 2-3\"}\n                ]\n\t\t}\n\t},\n    methods: {\n        onClick(evt, treeId, treeNode) {\n\n        },\n        onCheck(evt, treeId, treeNode) {\n\n        },\n        handleCreated(ztreeObj) {\n\n        }\n    }\n\t...\n```\n\nin template:\n\n```html\n\u003ctree\n  :nodes=\"nodes\"\n  @onClick=\"onClick\"\n  @onCheck=\"onCheck\"\n  @onCreated=\"handleCreated\"\n/\u003e\n```\n\n## 属性\n\n| 参数    | 说明       | 类型   | 默认值                      |\n| ------- | ---------- | ------ | --------------------------- |\n| setting | ztree 配置 | Object | `{view: {showIcon: false}}` |\n| nodes   | ztree 数据 | Array  | `[]`                        |\n\n## 事件\n\n完全移植[zTree API](http://www.treejs.cn/v3/api.php)中`callback`支持的事件，除了：\n\n- 不支持所有 `before` 开头的事件。这类事件的主要作用是根据返回值决定是否阻止后续的`on`事件，这种判断可以在`on`事件中实现；当然，你也可以通过`setting.callback.beforeXXX`自行配置\n- 不支持 `onNodeCreated` 事件。因为在大数据量下很耗性能，如果需要可以通过 `setting.callback.onNodeCreated` 自行传入\n- 增加 `onCreated` 事件。每次实例初始化完成时触发，回调参数接收 ztree 实例，通过 ztree 实例可以使用所有实例方法\n\n| 事件名称       | 说明                                              |\n| -------------- | ------------------------------------------------- |\n| onAsyncError   | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onAsyncSuccess | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onCheck        | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onClick        | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onCollapse     | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onDblClick     | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onDrag         | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onDragMove     | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onDrop         | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onExpand       | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onMouseDown    | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onMouseUp      | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onRemove       | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onRename       | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onRightClick   | 参考 [zTree API](http://www.treejs.cn/v3/api.php) |\n| onCreated      | 初始化渲染完成后触发，回调参数接收 ztree 实例     |\n\n## 扩展\n\nzTree 没有提供给整个实例更新数据的方法，vue-giant-tree 基于 Vue 的组件通信机制扩展实现了*响应式数据*特性，只要`nodes`的值发生变化，ztree 实例就会随之更新。\n\n[项目 DEMO](https://github.com/tower1229/Vue-Giant-Tree/blob/master/src/App.vue)里演示了 vue-giant-tree 的响应式数据特性。\n\n## 演示\n\n- 线上演示：\n\n\u003e http://refined-x.com/Vue-Giant-Tree/\n\n- 本地演示：\n\n```\nnpm i\nnpm run serve\n```\n\n## License\n\nMIT\n\nCopyright (c) 2019-present, [前端路上](http://refined-x.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftower1229%2Fvue-giant-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftower1229%2Fvue-giant-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftower1229%2Fvue-giant-tree/lists"}