{"id":13938040,"url":"https://github.com/halower/vue-tree","last_synced_at":"2025-04-09T10:04:12.674Z","repository":{"id":27273400,"uuid":"86438312","full_name":"halower/vue-tree","owner":"halower","description":"tree and multi-select component based on Vue.js 2.0","archived":false,"fork":false,"pushed_at":"2022-12-08T16:49:48.000Z","size":8430,"stargazers_count":933,"open_issues_count":57,"forks_count":201,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-04-02T08:15:37.201Z","etag":null,"topics":["javascript","vue","vue-tree","vue2"],"latest_commit_sha":null,"homepage":"https://github.com/halower/vue2-tree/blob/master/README.md","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/halower.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}},"created_at":"2017-03-28T09:04:25.000Z","updated_at":"2025-03-27T07:07:33.000Z","dependencies_parsed_at":"2022-09-15T07:22:10.193Z","dependency_job_id":null,"html_url":"https://github.com/halower/vue-tree","commit_stats":null,"previous_names":["halower/vue2-tree"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halower%2Fvue-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halower%2Fvue-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halower%2Fvue-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halower%2Fvue-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halower","download_url":"https://codeload.github.com/halower/vue-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"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":["javascript","vue","vue-tree","vue2"],"created_at":"2024-08-07T23:04:11.409Z","updated_at":"2025-04-09T10:04:12.640Z","avatar_url":"https://github.com/halower.png","language":"Vue","funding_links":[],"categories":["Vue","UI Components"],"sub_categories":["Tree"],"readme":"[![npm](https://img.shields.io/npm/v/vue-tree-halower.svg )](https://www.npmjs.com/package/vue-tree-halower)\n[![npm](https://img.shields.io/npm/dt/vue-tree-halower.svg)](https://www.npmjs.com/package/vue-tree-halower)\n[![GitHub stars](https://img.shields.io/github/stars/halower/vue-tree.svg?style=social\u0026label=Stars\u0026style=for-the-badge)](https://github.com/halower/vue-tree/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/halower/vue-tree.svg?style=social\u0026label=Fork\u0026style=for-the-badge)](https://github.com/halower/vue-tree/network)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n\n`\nThe document is poorly written and you are welcome to refine your documentation in the process of using it to better help others.\n`\n# Version: 2.x  ([中文文档](https://github.com/halower/vue2-tree/blob/master/README_CN.md))\n```QQ Group: 255965810``` \u003cbr/\u003e\n`we guess you may also see` [version 1.0](https://github.com/halower/vue2-tree/tree/1.x)\n# Online Demo\n[https://halower.github.io/vue-tree](http://120.77.84.4/)\n\n# SelectTree API\n The latest release has the ability to support the dropdown tree, extending the following with the same basic attributes and events (consistent with the [Tree API](https://github.com/halower/vue-tree#tree-api-doc)) \n \n| Parameters | Description | Type | Optional value |Default value |\n|---------- |-------- |---------- |---------- |---------- |\n|searchable | Search Functionality Required | Boolean | Y |true |\n|pleasechoosetext | Dropdown box default prompts this article | String | Y |Please choose ... |\n|searchtext | Search box default prompts this article | String | Y |Search ... | \n|searchfilter | Custom search pull down tree filter function | Function | Y |node =\u003e node.title.indexOf (This.searchworld) \u003e 1 | \n ## Effect Chart (no demo here, other effects like Onlinedemo)\n![](https://github.com/halower/vue-tree/blob/master/screenshots/selectTree.png)\n### How to use\nPlease read the [Tree API](https://github.com/halower/vue-tree#tree-api-doc) documentation before using the selectTree\n```\nimport { VTree, VSelectTree } from 'vue-tree-halower'\nVue.use (VTree)\nVue.use (VSelectTree)\n -------------------\n\u003cv-select-tree :data='treeData' v-model=\"['node-1-2']\"/\u003e\n ```\n# Tree API Doc\n### Node Property\n| Parameters | Description | Type | Optional values | Default value |\n|---------- |-------- |---------- |---------- |---------- |\n|id | when this property is empty, the title property will be used as the key | String | Y | -|\n|title | node name | String | N | -|\n|children | child nodes | Array[object] | Y | -|\n|async | whether to load child nodes asynchronously | Boolean | Y | false |\n|expanded | node Expansion | Boolean | Y | false |\n|halfcheck | whether the node is half optional (subordinate selected) | Boolean | Y | false |\n|visible | is the node visible | Boolean | Y | true |\n|selected | whether the node is selected | Boolean | Y | false |\n|checked | whether the node check box is selected | Boolean | Y | false |\n|nocheck | specifies that a node does not render check box when multiple checkboxes are open | Boolean | Y | false |\n|loading | open load effect | Boolean | Y | false |\n|chkDisabled | disable the function of a check box for a node | Boolean | Y | false |\n|hasExpanded | node has expanded| Boolean | Y | false |\n|parent | get parent node(when `allowGetParentNode=true`,the node will add `parent`method)) | Function | - | undefined |\n|selDisabled | disable the select function of a node| Boolean | Y | false |\n\n### Tree Property\n| Parameters | Description | Type | Optional values | default value |\n|---------- |-------- |---------- |---------- |---------- |\n|data | tree Data Source | Array[object] | N | -|\n|multiple | turn on Check mode | Boolean | Y | false |\n|tpl | custom templates | JSX | Y | false |\n|halfcheck | turn on semi-select mode | Boolean | Y | select all |\n|scoped | quarantine node Selected state | Boolean | Y | false |\n|draggable | support drag? | Boolean | Y | false |\n|dragafterexpanded | ro expand after dragging | Boolean | Y | true |\n|canDeleteRoot |  can delete the root node  | Boolean | Y | false |\n|maxLevel |  node max level | Number | Y | 1024 |\n|topMustExpand |  the top level must can expand | Boolean | Y | true |\n|allowGetParentNode |  allow get the parent node | Boolean | Y | false |\n|radio | the selected node only one | Boolean | Y | false |\n|selectAlone | select is alone | Boolean | Y | false |\n\n### method\n| Method name | Description | Parameters |\n|---------- |-------- |---------- |\n| getSelectedNodes | returns an array of currently selected nodes,isOriginal:false, | isOriginal: Boolean, ignoreInvisibleNode: Boolean |\n| getCheckedNodes | returns the array of nodes selected by the current check box | isOriginal: Boolean,ignoreInvisibleNode: Boolean |\n| getNodes |the options objects such as {selected:true}, if empty, use {} | options: Object,data: Array, isOriginal: Boolean, ignoreInvisibleNode: Boolean|\n| searchNodes | filter:function/string (if it is a function, it will eventually return a Boolean type) |node|\n| nodeSelected | to select a node |node: Object|\n| addNode | add a node |parentNode: Object, node: Object|\n| addNodes | add some nodes |parentNode: Object, nodes: Array|\n\n### events\n| Event name | Description | Parameters |\n|---------- |-------- |---------- |\n| node-click | click the node to trigger the event | node: Object |\n| node-select  | click the select to trigger the event | node: Object, selected: boolean, position: {level, index}|\n| node-check | click the checkbox to trigger the event | node: Object, checked: boolean, position: {level, index} |\n| node-mouse-over | over the node to trigger the event | node: Object, index: Number, parentNode: node, position: {level, index} |\n| async-load-nodes | event used to implement asynchronous loading | node: Object |\n| drag-node-end | drag node end trigger the event | {dragNode: Object, targetNode: Object} |\n| del-node | after delete a node | { parentNode: Object || null, delNode: Object } |\n| node-expand  | click the expand to trigger the event | node: Object, expand: boolean, position: {level, index}|\n\n### How to use\n\nStep1: install plugins  (Vue Cli3 not necessary, Demo based on VueCli3)\n```\nnpm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev\n\nnpm install vue-tree-halower  --save\n```\nStep2: In your .babelrc (Vue Cli3 not necessary,Demo based on VueCli3)\n```\n{\n  \"presets\": [\"env\"],\n  \"plugins\": [\"transform-vue-jsx\"]\n}\n```\nStep3： In your main.js\n```\nimport 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree\nimport VTree from 'vue-tree-halower'\n\nVue.use(VTree)\n```\n\n\n### Demo\n\n`Html`\n```\n  \u003cdiv class=\"tree\"\u003e\n    \u003cinput class=\"tree-search-input\" type=\"text\" v-model.lazy=\"searchword\" placeholder=\"search...\"/\u003e\n    \u003cbutton class=\" tree-search-btn\" type=\"button\" @click=\"search\"\u003eGO\u003c/button\u003e\n    \u003cv-tree ref='tree' :data='treeData' :multiple=\"true\" :tpl='tpl' :halfcheck='true' /\u003e\n  \u003c/div\u003e\n```\n`JS`\n```\nexport default {\n  name: 'HelloWorld',\n  data () {\n    return {\n      searchword: '',\n      initSelected: ['node-1'],\n      treeData1: [{\n        title: 'node1',\n        expanded: true,\n        children: [{\n          title: 'node 1-1',\n          expanded: true,\n          children: [{\n            title: 'node 1-1-1'\n          }, {\n            title: 'node 1-1-2'\n          }, {\n            title: 'node 1-1-3'\n          }]\n        }, {\n          title: 'node 1-2',\n          children: [{\n            title: \"\u003cspan style='color: red'\u003enode 1-2-1\u003c/span\u003e\"\n          }, {\n            title: \"\u003cspan style='color: red'\u003enode 1-2-2\u003c/span\u003e\"\n          }]\n        }]\n      }],\n      treeData2: [{\n        title: 'node1',\n        expanded: false,\n        async: true\n      }],\n\n      treeData3: [{\n        title: 'node1',\n        expanded: true,\n        children: [{\n          title: 'node 1-1',\n          expanded: true,\n          children: [{\n            title: 'node 1-1-1'\n          }, {\n            title: 'node 1-1-2'\n          }, {\n            title: 'node 1-1-3'\n          }]\n        }]\n      }]\n    }\n  },\n  methods: {\n    // tpl (node, ctx, parent, index, props) {\n    tpl (...args) {\n      let {0: node, 2: parent, 3: index} = args\n      let titleClass = node.selected ? 'node-title node-selected' : 'node-title'\n      if (node.searched) titleClass += ' node-searched'\n      return \u003cspan\u003e\n        \u003cbutton class=\"treebtn1\" onClick={() =\u003e this.$refs.tree.addNode(node, {title: 'sync node'})}\u003e+\u003c/button\u003e\n         \u003cspan class={titleClass} domPropsInnerHTML={node.title} onClick={() =\u003e {\n           this.$refs.tree.nodeSelected(node)\n         }}\u003e\u003c/span\u003e\n      \u003cbutton class=\"treebtn2\" onClick={() =\u003e this.asyncLoad(node)}\u003easync\u003c/button\u003e\n      \u003cbutton class=\"treebtn3\" onClick={() =\u003e this.$refs.tree.delNode(node, parent, index)}\u003edelete\u003c/button\u003e\n      \u003c/span\u003e\n    },\n    async asyncLoad (node) {\n      this.$set(node, 'loading', true)\n      let pro = new Promise(resolve =\u003e {\n        setTimeout(resolve, 2000, ['async node1', 'async node2'])\n      })\n      this.$refs.tree1.addNodes(node, await pro)\n      this.$set(node, 'loading', false)\n    },\n    search () {\n      this.$refs.tree.searchNodes(this.searchword)\n    }\n  }\n}\n\u003c/script\u003e\n```\n### 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励\n\u003cimg src=\"https://github.com/halower/vue2-tree/blob/master/src/assets/hello.png\" width=256 height=256 /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalower%2Fvue-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalower%2Fvue-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalower%2Fvue-tree/lists"}