[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9070":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},9070,"vue-tree","halower\u002Fvue-tree","halower","tree and multi-select component based on Vue.js 2.0","https:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue2-tree\u002Fblob\u002Fmaster\u002FREADME.md",null,"Vue",929,200,24,38,0,50.91,"MIT License",false,"master",true,[23,24,5,25],"javascript","vue","vue2","2026-06-12 04:00:43","[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-tree-halower.svg )](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-tree-halower)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fvue-tree-halower.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-tree-halower)\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fhalower\u002Fvue-tree.svg?style=social&label=Stars&style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue-tree\u002Fstargazers)\n[![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fhalower\u002Fvue-tree.svg?style=social&label=Fork&style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue-tree\u002Fnetwork)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmashape\u002Fapistatus.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:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue2-tree\u002Fblob\u002Fmaster\u002FREADME_CN.md))\n```QQ Group: 255965810``` \u003Cbr\u002F>\n`we guess you may also see` [version 1.0](https:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue2-tree\u002Ftree\u002F1.x)\n# Online Demo\n[https:\u002F\u002Fhalower.github.io\u002Fvue-tree](http:\u002F\u002F120.77.84.4\u002F)\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:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue-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 => node.title.indexOf (This.searchworld) > 1 | \n ## Effect Chart (no demo here, other effects like Onlinedemo)\n![](https:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue-tree\u002Fblob\u002Fmaster\u002Fscreenshots\u002FselectTree.png)\n### How to use\nPlease read the [Tree API](https:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue-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']\"\u002F>\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\u002Fstring (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\u002Fdist\u002Fhalower-tree.min.css' \u002F\u002F 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\">\n    \u003Cinput class=\"tree-search-input\" type=\"text\" v-model.lazy=\"searchword\" placeholder=\"search...\"\u002F>\n    \u003Cbutton class=\" tree-search-btn\" type=\"button\" @click=\"search\">GO\u003C\u002Fbutton>\n    \u003Cv-tree ref='tree' :data='treeData' :multiple=\"true\" :tpl='tpl' :halfcheck='true' \u002F>\n  \u003C\u002Fdiv>\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'>node 1-2-1\u003C\u002Fspan>\"\n          }, {\n            title: \"\u003Cspan style='color: red'>node 1-2-2\u003C\u002Fspan>\"\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    \u002F\u002F 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>\n        \u003Cbutton class=\"treebtn1\" onClick={() => this.$refs.tree.addNode(node, {title: 'sync node'})}>+\u003C\u002Fbutton>\n         \u003Cspan class={titleClass} domPropsInnerHTML={node.title} onClick={() => {\n           this.$refs.tree.nodeSelected(node)\n         }}>\u003C\u002Fspan>\n      \u003Cbutton class=\"treebtn2\" onClick={() => this.asyncLoad(node)}>async\u003C\u002Fbutton>\n      \u003Cbutton class=\"treebtn3\" onClick={() => this.$refs.tree.delNode(node, parent, index)}>delete\u003C\u002Fbutton>\n      \u003C\u002Fspan>\n    },\n    async asyncLoad (node) {\n      this.$set(node, 'loading', true)\n      let pro = new Promise(resolve => {\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\u002Fscript>\n```\n### 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fhalower\u002Fvue2-tree\u002Fblob\u002Fmaster\u002Fsrc\u002Fassets\u002Fhello.png\" width=256 height=256 \u002F>\n","halower\u002Fvue-tree 是一个基于 Vue.js 2.0 的树形结构和多选组件。它提供了丰富的节点属性配置，如异步加载子节点、节点展开状态、半选状态等，并支持下拉树搜索功能，允许用户自定义搜索过滤器。该组件适合用于需要展示层级数据并提供选择功能的场景，例如组织架构图、文件目录浏览或分类选择等。其简洁的API设计使得开发者能够快速集成到项目中，同时保持良好的可维护性。",2,"2026-06-11 03:21:03","top_language"]