https://halower.github.io/vue2-tree
-
normal tree
-
lazy loading
-
loading tip
-
dynamic add node
-
custom tree icon, use iconFont
-
custom icon style. color
-
ie9,10,11,spartan
issues
-
checkbox status fix later
showCheckbox: true, halfCheck: true
notice:
loadingChild method
import { ZTree, ComboZTree, generateKey, getParentNode } from 'vue2-lazy-tree'
import ZTree from 'vue2-lazy-tree'
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification publish to npm
npm run buildHow to install the plugin (the npm package is not necessarily updated synchronously with the source code)
npm install vue2-lazy-tree or cnpm install vue2-lazy-tree (国内)
import { ZTree } from 'vue2-lazy-tree'
import './../dist/vue2-tree.min.css'
Vue.use(ZTree)
<template>
<div id="app" style="width:300px; margin: auto auto;">
<tree
ref='tree'
:treeData="treeData"
:options="options"
@node-click="itemClick"
/>
</div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios';
import Tree from './components/tree/tree.vue';
let that = null
export default {
name: 'app',
data () {
that = this;
return {
options: {
showCheckbox: false,
halfCheck: false,//控制父框是否需要半钩状态
lazy: true,
load: this.loadingChild,
showSearch: false,
search: {
useInitial: true,
useEnglish: false,
customFilter: null
}
},
treeData: []
}
},
mounted: function () {
this.loadTreeData();
},
methods: {
/**
* generate key 0-1-2-3
* this is very important function for now module
* @param treeData
* @param parentKey
* @returns {Array}
*/
generateKey (treeData = [], parentKey) {
treeData = treeData.map((item, i) => {
item.key = parentKey + '-' + i.toString();
return item;
})
return treeData;
},
loadTreeData: function () {
let treeData = [
{
id: 1,
label: '一级节点',
open: false,
checked: false,
nodeSelectNotAll: false,//新增参数，表示父框可以半钩状态
parentId: null,
visible: true,
searched: false
},
{
id: 2,
label: '一级节点',
open: false,
checked: false,
nodeSelectNotAll: false,//新增参数，表示父框可以半钩状态
parentId: null,
visible: true,
searched: false
}
];
this.treeData = this.generateKey(treeData, 0);
},
async loadingChild (node, index) {
try {
let tem;
let postions = node.key.split('-');
// load json file you need another server
let data = await axios.get(' http://172.16.0.104:8082/child.json');
for (let [index, item] of postions.entries()) {
switch (index) {
case 0:
break;
case 1:
tem = this.treeData[item];
break;
default:
tem = tem.children[item];
}
}
// set Children
Vue.set(tem, 'children', this.generateKey(data.data, node.key) );
Promise.resolve(data);
} catch (e) {
Promise.reject(e);
}
},
itemClick (node) {
console.log(node.key);
}
},
components: {
Tree
}
}
</script>
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| options | 配置项 | Object | — | — |
| treeData | 指定节点对象数组 | Array[Object] | — | — |
options: {
labelKey: '', { String } set the label field, default 'label'
showCheckbox: true, //是否支持多选,
halfCheck: true,//控制父框是否需要半钩状态,
lazy: true, // 是否是异步加载数据
load: this.loadingChild, // 异步加载数据方法
showSearch: false, // 是否显示搜索
iconClass: { // custom icon class, Default
close: 'icon-youjiantou',
open: 'icon-xiajiantou',
add: 'icon-add'
},
iconStyle: { // custom icon style, sometimes u just need to set color
color: '#108ee9' // default #000
},
dynamicAdd: true,
// function handle display add button
// return true or false, default true
// [Function] param: { node }
dynamicAddFilter: (node) => {
if (node.type === 1 || node.type === 2) {
return true
}
return false
},
// function handle add node; the new node must have `dynamicAdd : true` property
// the tree component rely on this show editor
// param { node }
// return Promise(parent.children) must bu children Array
dynamicAddNode: [Function],
// function handle save node; when successfull saved, the new node must del `dynamicAdd` property
// the tree component rely on this save node
// param { node, $event }
// return Promise(node) must be node Object return from server
dynamicSaveNode: [Function],
// function handle leaf icon
// param { node }
// return { String } , iconfont class name, default ''
leafIcon: [Function],
search: {
useInitial: true, //是否支持拼音首字母搜索
useEnglish: false, //是否是英文搜索
customFilter: null // 自定义节点过滤函数
}
/* 节点元素 */
{
id: 1, // 节点标志
label: '一级节点', // 节点名称
open: true, // 是否打开节点
checked: false, // 是否被选中
parentId: null, // 父级节点Id
visible: true, // 是否可见
searched: false, // 是否是搜索值,
nodeSelectNotAll: false, // 表示父框可以半钩状态
leaf: true, // 是否是叶子节点， 如果是叶子结点， lazy=true 时，显示 leafIcon， 此节点不再异步加载数据
children: [] // 子节点,
}
| 方法名 | 说明 | 参数 |
|---|---|---|
| getSelectedNodeIds | 若节点可被选择则返回目前被选中的节点Id所组成的数组 | 被选中的节点Id所组成的数组 |
| getSelectedNodes | 若节点可被选择则返回目前被选中的节点组成的数组 | 被选中的节点所组成的数组 |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| node-click | 节点被点击时的回调 | 共1个参数，节点组件本身。 |
u can use build in iconfont class or u add it by u self iconFont
how to find the build in class:
// just go to the package folder, under node_modules/vue2-lazy-tree/
src/components/tree/assets/iconfont/demo_fontclass.html
QQ group:255965810
- lily7129
- halower
- https://github.com/alonesuperman
- tinwan
-
beautify the tree 25082017
-
fix tree's halfchecked&click status 23082017
-
fix tree's root bug 16082017
-
fix generateKey method bug 31072017
-
add label key property, set the label field 28072017
-
add node leaf 27072017
-
fix key bugs, add iconfont class 25072017
-
fix checkbox bugs, showCheckbox & halfCheck 25072017
-
Add how to use it in the production env 25072017