{"id":48865580,"url":"https://github.com/chendonming/virtualtree","last_synced_at":"2026-04-15T18:06:23.232Z","repository":{"id":65525981,"uuid":"513796316","full_name":"chendonming/virtualtree","owner":"chendonming","description":"virtual tree for vue2.x","archived":false,"fork":false,"pushed_at":"2022-12-07T06:21:33.000Z","size":327,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-18T04:24:30.336Z","etag":null,"topics":["tree","virtual-tree","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://5kgy3l.csb.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chendonming.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-14T07:07:38.000Z","updated_at":"2023-02-02T10:29:56.000Z","dependencies_parsed_at":"2023-01-27T09:00:34.591Z","dependency_job_id":null,"html_url":"https://github.com/chendonming/virtualtree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chendonming/virtualtree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chendonming%2Fvirtualtree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chendonming%2Fvirtualtree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chendonming%2Fvirtualtree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chendonming%2Fvirtualtree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chendonming","download_url":"https://codeload.github.com/chendonming/virtualtree/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chendonming%2Fvirtualtree/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31853314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: 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":["tree","virtual-tree","vue","vuejs"],"created_at":"2026-04-15T18:06:22.469Z","updated_at":"2026-04-15T18:06:23.227Z","avatar_url":"https://github.com/chendonming.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## virtual tree\n\n\u003e This component is developed for Vue2.x, Vue3.x is under development\n\n\u003e Open source is not easy. If it helps you a little, click on a free start. This will be the whole motivation for me to update and maintain.\n### introduce\n\nThe virtual list is actually an implementation of on-demand display, that is, only the visible area is rendered.\nA technique that does not render or partially renders data in non-visible areas, resulting in extremely high rendering performance.\n\nAfter the baptism of tens of thousands of WebGl components, it still stands and is trustworthy.\n\n\u003ca href=\"https://5kgy3l.csb.app/\"\u003eClick to view demo via codesanbox\u003c/a\u003e\n\n## use\n````js\nimport VirtualTree from \"virtualtree-vue2\";\nimport \"virtualtree-vue2/lib/virtualtree-vue2.css\";\n\nVue.use(VirtualTree);\n````\n\n```html\n\u003cvirtual-tree\n  :data=\"data\"\n  :props=\"props\"\n  @node-click=\"handleNodeClick\"\n  @checked=\"handleChecked\"\n  ref=\"tree\"\n\u003e\n\u003c/virtual-tree\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n         props: {\n            children: \"TestChildren\",\n            label: \"Label\",\n            key: \"uuid\",\n          },\n      }\n    }\n  }\n\u003c/script\u003e\n````\n\nBecause the virtual tree needs to determine the area by scrolling the viewport, the DOM occupied by `virtual-tree` must have a height when initialized, and this height can be set by the parent.\n\nSlots can be defined for each row of data\n```html\n\u003cvirtual-tree\n  :data=\"data\"\n  :props=\"props\"\n  @node-click=\"handleNodeClick\"\n  @checked=\"handleChecked\"\n\u003e\n  \u003ctemplate #default=\"{ text, parentName }\"\u003e\n    \u003cdiv class=\"test-slot\"\u003e{{ text }} {{ parentName }}\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/virtual-tree\u003e\n````\nThe data of the current node will be injected into the default slot. `parentName` is an automatically generated associated parent field, a string like breadcrumbs\n````\nAll \u003e Node 1 \u003e Byte 2\n````\n\nWhen you click on the corresponding node, an `active` className will be added, and you can set the style yourself to define the effect of the click\n````css\n.treeitem_content_label.active {\n\n}\n````\n\n## API\n\n### handleChecked(obj, bool)\nCheck a piece of data, it will be automatically checked\n- obj row data\n- bool true: checked false: unchecked\n````js\n// eg:\nthis.$refs.tree.handleChecked(row, true)\n````\n### handleExpanded(obj, bool)\nExpand or close a node. It will automatically expand or close the association\n- obj row data\n- bool true: expand false: close\n````js\n// eg:\nthis.$refs.tree.handleExpanded(row, true)\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchendonming%2Fvirtualtree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchendonming%2Fvirtualtree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchendonming%2Fvirtualtree/lists"}