lt-tree v0.0.5

LtTree 树组件

参考uni-app插件市场中的tree树形结构插件。

安装

$ npm install lt-tree -S

使用

在 main.js 文件中引入插件并注册

# main.js
import LtTree from 'LtTree';
Vue.use(vcolorpicker);

基本用法：

<template>
	<lt-tree :tree-data="treeData" 
		node-key="label" 
		@node-expand="handleNodeExpand" 
		@node-click="handleNodeClick">
		</lt-tree>
</template>

export default {
	data() {
		return {
			treeData: []
		};
	},
	onLoad() {
		setTimeout(() => {
			this.treeData = [{
				label: '一级 1',
				children: [{
					label: '二级 1-1',
					children: [{
						label: '三级 1-1-1'
					}]
				}]
			}, {
				label: '一级 2',
				children: [{
					label: '二级 2-1',
					children: [{
						label: '三级 2-1-1'
					}]
				}, {
					label: '二级 2-2',
					children: [{
						label: '三级 2-2-1'
					}]
				}]
			}, {
				label: '一级 3',
				children: [{
					label: '二级 3-1',
					children: [{
						label: '三级 3-1-1'
					}]
				}, {
					label: '二级 3-2',
					children: [{
						label: '三级 3-2-1'
					}]
				}]
			}]
		}, 2000);
	},
	methods: {
		handleNodeClick(obj) {
			console.log('handleNodeClick', JSON.stringify(obj));
		},
		handleNodeExpand(obj) {
			console.log('handleNodeExpand', JSON.stringify(obj));
		}
	}
};

懒加载：

tips:为了确保页面加载完成后才去调用load方法，this指向正确,使用v-if懒加载树组件，在页面的onLoad之后调用

<template>
	<lt-tree :props="props" 
             node-key="name" 
             :load="loadNode" lazy>
	</lt-tree>
</template>

export default {
	data() {
		return {
			props: {
				label: 'name',
				children: 'zones',
				isLeaf: 'leaf'
			}
		};
	},
	methods: {
		loadNode(node, resolve) {
			if (node.level === 0) {
				setTimeout(() => {
					resolve([{
						name: 'region'
					}]);
				}, 1000);
			}else{
				if (node.level > 1) return resolve([]);
				setTimeout(() => {
					const data = [{
						name: 'leaf',
						leaf: true
					}, {
						name: 'zone'
					}];
					resolve(data);
				}, 500);
			}
		}
	}
};

属性说明：

props 属性说明：

方法及事件： 参见elementUI说明：https://element.eleme.cn/#/zh-CN/component/tree