[![npm](https://img.shields.io/npm/v/vue-tree-halower.svg )](https://www.npmjs.com/package/vue-tree-halower)
[![npm](https://img.shields.io/npm/dt/vue-tree-halower.svg)](https://www.npmjs.com/package/vue-tree-halower)
[![GitHub stars](https://img.shields.io/github/stars/halower/vue-tree.svg?style=social&label=Stars&style=for-the-badge)](https://github.com/halower/vue-tree/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/halower/vue-tree.svg?style=social&label=Fork&style=for-the-badge)](https://github.com/halower/vue-tree/network)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()
`
The document is poorly written and you are welcome to refine your documentation in the process of using it to better help others.
`
# Version: 2.x ([中文文档](https://github.com/halower/vue2-tree/blob/master/README_CN.md))
```QQ Group: 255965810``` <br/>
`we guess you may also see` [version 1.0](https://github.com/halower/vue2-tree/tree/1.x)
# Online Demo
[https://halower.github.io/vue-tree](http://120.77.84.4/)
# SelectTree API
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))
| Parameters | Description | Type | Optional value |Default value |
|---------- |-------- |---------- |---------- |---------- |
|searchable | Search Functionality Required | Boolean | Y |true |
|pleasechoosetext | Dropdown box default prompts this article | String | Y |Please choose ... |
|searchtext | Search box default prompts this article | String | Y |Search ... |
|searchfilter | Custom search pull down tree filter function | Function | Y |node => node.title.indexOf (This.searchworld) > 1 |
## Effect Chart (no demo here, other effects like Onlinedemo)
![](https://github.com/halower/vue-tree/blob/master/screenshots/selectTree.png)
### How to use
Please read the [Tree API](https://github.com/halower/vue-tree#tree-api-doc) documentation before using the selectTree
```
import { VTree, VSelectTree } from 'vue-tree-halower'
Vue.use (VTree)
Vue.use (VSelectTree)
-------------------
<v-select-tree :data='treeData' v-model="['node-1-2']"/>
```
# Tree API Doc
### Node Property
| Parameters | Description | Type | Optional values | Default value |
|---------- |-------- |---------- |---------- |---------- |
|id | when this property is empty, the title property will be used as the key | String | Y | -|
|title | node name | String | N | -|
|children | child nodes | Array[object] | Y | -|
|async | whether to load child nodes asynchronously | Boolean | Y | false |
|expanded | node Expansion | Boolean | Y | false |
|halfcheck | whether the node is half optional (subordinate selected) | Boolean | Y | false |
|visible | is the node visible | Boolean | Y | true |
|selected | whether the node is selected | Boolean | Y | false |
|checked | whether the node check box is selected | Boolean | Y | false |
|nocheck | specifies that a node does not render check box when multiple checkboxes are open | Boolean | Y | false |
|loading | open load effect | Boolean | Y | false |
|chkDisabled | disable the function of a check box for a node | Boolean | Y | false |
|hasExpanded | node has expanded| Boolean | Y | false |
|parent | get parent node(when `allowGetParentNode=true`,the node will add `parent`method)) | Function | - | undefined |
|selDisabled | disable the select function of a node| Boolean | Y | false |
### Tree Property
| Parameters | Description | Type | Optional values | default value |
|---------- |-------- |---------- |---------- |---------- |
|data | tree Data Source | Array[object] | N | -|
|multiple | turn on Check mode | Boolean | Y | false |
|tpl | custom templates | JSX | Y | false |
|halfcheck | turn on semi-select mode | Boolean | Y | select all |
|scoped | quarantine node Selected state | Boolean | Y | false |
|draggable | support drag? | Boolean | Y | false |
|dragafterexpanded | ro expand after dragging | Boolean | Y | true |
|canDeleteRoot | can delete the root node | Boolean | Y | false |
|maxLevel | node max level | Number | Y | 1024 |
|topMustExpand | the top level must can expand | Boolean | Y | true |
|allowGetParentNode | allow get the parent node | Boolean | Y | false |
|radio | the selected node only one | Boolean | Y | false |
|selectAlone | select is alone | Boolean | Y | false |
### method
| Method name | Description | Parameters |
|---------- |-------- |---------- |
| getSelectedNodes | returns an array of currently selected nodes,isOriginal:false, | isOriginal: Boolean, ignoreInvisibleNode: Boolean |
| getCheckedNodes | returns the array of nodes selected by the current check box | isOriginal: Boolean,ignoreInvisibleNode: Boolean |
| getNodes |the options objects such as {selected:true}, if empty, use {} | options: Object,data: Array, isOriginal: Boolean, ignoreInvisibleNode: Boolean|
| searchNodes | filter:function/string (if it is a function, it will eventually return a Boolean type) |node|
| nodeSelected | to select a node |node: Object|
| addNode | add a node |parentNode: Object, node: Object|
| addNodes | add some nodes |parentNode: Object, nodes: Array|
### events
| Event name | Description | Parameters |
|---------- |-------- |---------- |
| node-click | click the node to trigger the event | node: Object |
| node-select | click the select to trigger the event | node: Object, selected: boolean, position: {level, index}|
| node-check | click the checkbox to trigger the event | node: Object, checked: boolean, position: {level, index} |
| node-mouse-over | over the node to trigger the event | node: Object, index: Number, parentNode: node, position: {level, index} |
| async-load-nodes | event used to implement asynchronous loading | node: Object |
| drag-node-end | drag node end trigger the event | {dragNode: Object, targetNode: Object} |
| del-node | after delete a node | { parentNode: Object || null, delNode: Object } |
| node-expand | click the expand to trigger the event | node: Object, expand: boolean, position: {level, index}|
### How to use
Step1: install plugins (Vue Cli3 not necessary, Demo based on VueCli3)
```
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
npm install vue-tree-halower --save
```
Step2: In your .babelrc (Vue Cli3 not necessary,Demo based on VueCli3)
```
{
"presets": ["env"],
"plugins": ["transform-vue-jsx"]
}
```
Step3: In your main.js
```
import 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree
import VTree from 'vue-tree-halower'
Vue.use(VTree)
```
### Demo
`Html`
```
<div class="tree">
<input class="tree-search-input" type="text" v-model.lazy="searchword" placeholder="search..."/>
<button class=" tree-search-btn" type="button" @click="search">GO</button>
<v-tree ref='tree' :data='treeData' :multiple="true" :tpl='tpl' :halfcheck='true' />
</div>
```
`JS`
```
export default {
name: 'HelloWorld',
data () {
return {
searchword: '',
initSelected: ['node-1'],
treeData1: [{
title: 'node1',
expanded: true,
children: [{
title: 'node 1-1',
expanded: true,
children: [{
title: 'node 1-1-1'
}, {
title: 'node 1-1-2'
}, {
title: 'node 1-1-3'
}]
}, {
title: 'node 1-2',
children: [{
title: "<span style='color: red'>node 1-2-1</span>"
}, {
title: "<span style='color: red'>node 1-2-2</span>"
}]
}]
}],
treeData2: [{
title: 'node1',
expanded: false,
async: true
}],
treeData3: [{
title: 'node1',
expanded: true,
children: [{
title: 'node 1-1',
expanded: true,
children: [{
t
没有合适的资源?快使用搜索试试~ 我知道了~
vue-tree:基于Vue.js 2.0的树和多选组件vue-tree-master
共43个文件
js:12个
vue:8个
md:3个
需积分: 5 0 下载量 61 浏览量
2023-11-23
17:41:45
上传
评论
收藏 300KB RAR 举报
温馨提示
vue-tree:基于Vue.js 2.0的树和多选组件vue-tree-master
资源推荐
资源详情
资源评论
收起资源包目录
vue-tree:基于Vue.js 2.0的树和多选组件vue-tree-master.rar (43个子文件)
vue-tree:基于Vue.js 2.0的树和多选组件vue-tree-master
vue-tree-master
.editorconfig 147B
screenshots
selectTree.png 31KB
README_CN.md 9KB
webpack.config.js 2KB
src
App.vue 119B
assets
hello.png 51KB
main.js 140B
components
treeUl.vue 3KB
collapse-transition.js 2KB
loading.vue 6KB
mixins.js 797B
treeLi.vue 7KB
index.js 272B
selectTree.vue 7KB
render.js 942B
tree.css 5KB
tree.vue 19KB
LICENSE 1KB
demo
yarn.lock 269KB
babel.config.js 53B
src
App.vue 462B
assets
logo.png 7KB
main.js 276B
components
HelloWorld.vue 5KB
package.json 1KB
public
favicon.ico 1KB
index.html 545B
.gitignore 214B
README.md 229B
.babelrc 108B
docs
app.5eff19d53f4dd681b9d99313132dfe70.css 10KB
app.8764e0e73d92f21a8726.js 24KB
manifest.c57b3379a0776b06afff.js 1KB
vendor.52b7260f9c35a60d3253.js 218KB
index.html 438B
dist
v2-tree.js.map 178KB
halower-tree.min.css.map 97B
halower-tree.min.css 9KB
v2-tree.js 27KB
package.json 1KB
index.html 201B
.gitignore 170B
README.md 9KB
共 43 条
- 1
资源评论
温柔-的-女汉子
- 粉丝: 929
- 资源: 4012
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 驱动代码驱动代码驱动代码驱动代码
- SVID_20240523_141155_1.mp4
- Code for the complete guide to tkinter tutorial
- 关于百货中心供应链管理系统.zip
- SimpleFolderIcon-master 修改Unity的Project下的文件夹图标
- A python Tkinter widget to display tile based maps
- A pure Python library for adding tables to a Tkinter application
- Vector资源文件.zip
- MobaXterm-Installer
- 88-520告白(520气球).zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功