{"id":45240537,"url":"https://github.com/wchbrad/vue-easy-tree","last_synced_at":"2026-02-20T21:07:06.323Z","repository":{"id":41816433,"uuid":"417422758","full_name":"wchbrad/vue-easy-tree","owner":"wchbrad","description":"A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.","archived":false,"fork":false,"pushed_at":"2024-09-14T06:32:23.000Z","size":472,"stargazers_count":150,"open_issues_count":9,"forks_count":43,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T12:16:33.712Z","etag":null,"topics":["checkbox","lazyload","tree","virtualscroll","vue2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/wchbrad.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-10-15T08:21:46.000Z","updated_at":"2025-11-16T09:17:12.000Z","dependencies_parsed_at":"2024-06-18T20:10:19.210Z","dependency_job_id":"199b1a93-6a7b-48fa-9764-8d494db08166","html_url":"https://github.com/wchbrad/vue-easy-tree","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/wchbrad/vue-easy-tree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wchbrad%2Fvue-easy-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wchbrad%2Fvue-easy-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wchbrad%2Fvue-easy-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wchbrad%2Fvue-easy-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wchbrad","download_url":"https://codeload.github.com/wchbrad/vue-easy-tree/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wchbrad%2Fvue-easy-tree/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29664585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T19:49:36.704Z","status":"ssl_error","status_checked_at":"2026-02-20T19:44:05.372Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["checkbox","lazyload","tree","virtualscroll","vue2"],"created_at":"2026-02-20T21:07:05.686Z","updated_at":"2026-02-20T21:07:06.315Z","avatar_url":"https://github.com/wchbrad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/@wchbrad/vue-easy-tree.svg)](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)\n[![vue2](https://img.shields.io/badge/vue-2.6+-brightgreen.svg)](https://vuejs.org/)\n[![last commit](https://img.shields.io/github/last-commit/wchbrad/vue-easy-tree.svg)](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)\n[![NPM downloads](https://img.shields.io/npm/dm/@wchbrad/vue-easy-tree.svg?style=flat)](https://npmjs.org/package/@wchbrad/vue-easy-tree)\n[![license](https://img.shields.io/npm/l/@wchbrad/vue-easy-tree.svg?maxAge=2592000)](http://www.opensource.org/licenses/mit-license.php)\n\n# vue-easy-tree\n\n**English** | [中文](./README.zh-CN.md)\n\n## Introduction\nA tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.\n\nBased on the tree style and function extracted from [element-ui](https://element.eleme.cn/#/en-US/component/tree)(License:MIT), combined with [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)(License:MIT) tree component.\n\n## v1.0 Feature List [![npm](https://img.shields.io/npm/v/@wchbrad/vue-easy-tree.svg)](https://www.npmjs.com/package/@wchbrad/vue-easy-tree)\n\n-  Large data volume supports virtual scrolling\n-  Display of basic tree data\n-  Support checkbox selection\n-  Support lazy loading\n-  Expanded by default and selected by default\n-  Disable node\n-  Select nodes and obtain selected node information in a variety of ways\n-  Support custom node content\n-  Support node filtering\n-  Support accordion mode under non-virtual scrolling\n-  Support node drag and drop when non-lazy loading\n\n## Features\n\n-  Support virtual scrolling\n-  Not only supports tree-shaped data display with large amounts of data, but also supports data manipulation and modification\n\n\n## Install\n\n```\nnpm install @wchbrad/vue-easy-tree\n```\n\nor\n\n```\nyarn add @wchbrad/vue-easy-tree\n```\n\n## Mount\n\n### mount with global\n\nImport in the `main.js` file:\n\n```JS\nimport Vue from \"vue\";\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\n// Style file, you can customize the style or theme according to your needs\nimport \"@wchbrad/vue-easy-tree/src/assets/index.scss\"\n\nVue.use(VueEasyTree)\n```\n\n### mount with component\n\nImport in the component：\n\n```JS\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\n// Style file, you can customize the style or theme according to your needs\nimport \"@wchbrad/vue-easy-tree/src/assets/index.scss\"\n\nexport default {\n  components: {\n    VueEasyTree\n  }\n}\n```\n\n## Usage:\n\n:warning: When using virtual scrolling, `node-key` must be set\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"ve-tree\" style=\"height:calc(100vh - 20px)\"\u003e\n  \u003c!-- Just remove the height parameter when not using virtual scrolling --\u003e\n    \u003cvue-easy-tree\n      ref=\"veTree\"\n      node-key=\"id\"\n      height=\"calc(100vh - 20px)\"\n      :data=\"treeData\"\n      :props=\"props\"\n    \u003e\u003c/vue-easy-tree\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      props: {\n        label: \"name\",\n        children: \"children\"\n      },\n      treeData: []\n    };\n  },\n  created() {\n    const data = [],\n      root = 8,\n      children = 3,\n      base = 1000;\n    for (let i = 0; i \u003c root; i++) {\n      data.push({\n        id: `${i}`,\n        name: `test-${i}`,\n        children: []\n      });\n      for (let j = 0; j \u003c children; j++) {\n        data[i].children.push({\n          id: `${i}-${j}`,\n          name: `test-${i}-${j}`,\n          children: []\n        });\n        for (let k = 0; k \u003c base; k++) {\n          data[i].children[j].children.push({\n            id: `${i}-${j}-${k}`,\n            name: `test-${i}-${j}-${k}`\n          });\n        }\n      }\n    }\n    this.treeData = data;\n  }\n};\n\u003c/script\u003e\n\n```\n\n## Change SCSS variables in the project\nBy creating a new style file, such as: `ve-tree-var.scss`, write the following content：\n\n```JS\n/* Change theme color variable */\n$--color-primary: #ea5404;\n\n/* Change the icon font path variable, required */\n$--font-path: \"~@wchbrad/vue-easy-tree/src/assets/fonts\";\n\n@import \"@wchbrad/vue-easy-tree/src/assets/index.scss\";\n```\n:warning: It should be noted that it is necessary to override the font path variable, and assign it to the relative path where the icon icon in @wchbrad/vue-easy-tree is located.\n\nThen directly import the above style files in `main.js`：\n```JS\nimport Vue from 'vue'\nimport VueEasyTree from \"@wchbrad/vue-easy-tree\";\nimport \"./css/ve-tree-var.scss\"\n\nVue.use(VueEasyTree)\n```\n\n## Other properties and methods\n\n**From [element-ui official document](https://element.eleme.cn/#/en-US/component/tree)**\u003cbr /\u003e\n**When you need to use virtual scrolling, just add the `height` property, such as:**\n```html\n\u003cvue-easy-tree :data=\"data\" height=\"calc(100vh - 20px)\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"\u003e\u003c/vue-easy-tree\u003e\n```\n\n**[Quick view of examples and api](./element-ui-tree.md)**\n\n\n## License\n\n[MIT](http://www.opensource.org/licenses/mit-license.php)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwchbrad%2Fvue-easy-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwchbrad%2Fvue-easy-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwchbrad%2Fvue-easy-tree/lists"}