lt-tree

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);
			}
		}
	}
};

属性说明：

|属性名 |类型 |默认值 |说明 | |--- |--- |--- |--- | |nodeKey |String |-|必填，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | |treeData |Array |- |非懒加载时的展示数据 | |emptyText |String |暂无数据 |内容为空的时候展示的文本 | |renderAfterExpand |Boolean |true |是否在第一次展开某个树节点后才渲染其子节点 | |checkStrictly |Boolean |false |在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false，如果设置了checkOnlyLeaf为true，这里也将变为true | |defaultExpandAll |Boolean |false |是否默认展开所有节点 | |expandOnClickNode |Boolean |true |是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点 | |checkOnClickNode |Boolean |false |是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点 | |autoExpandParent |Boolean |true |是否在第一次展开某个树节点后才渲染其子节点 | |defaultCheckedKeys |Array |- |默认勾选的节点的 key 的数组 | |defaultExpandedKeys |Array |- |默认展开的节点的 key 的数组 | |currentNodeKey |String, Number |- |当前选中的节点 | |showCheckbox |Boolean |false |节点是否可被选择 | |showRadio |Boolean |false |节点是否可被单选 | |checkOnlyLeaf |Boolean |false |是否最后一层叶子节点才显示单选/多选框| |props |Object |见下文 |数据中对应的属性名 | |lazy |Boolean |false |是否懒加载子节点，需与 load 方法结合使用 | |highlightCurrent |Boolean |false |是否高亮当前选中节点，默认值是 false | |load |Function |- |加载子树数据的方法，仅当 lazy 属性为true 时生效 | |filterNodeMethod |Function |- |对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | |childVisibleForFilterNode |Boolean |false |搜索时是否展示匹配项的所有子节点 | |accordion |Boolean |false |是否每次只打开一个同级树节点展开 | |indent |Number |18 |相邻级节点间的水平缩进，单位为像素 | |iconClass |String |- |自定义树节点的展开图标，图标class | |showNodeIcon |Boolean |false |是否显示节点图标，如果配置为true,需要配置props中对应的图标属性名称 |

props 属性说明：

|属性名 |类型 |默认值 |说明 | |--- |--- |--- |--- | |label |string, function(data, node) |-|指定节点标签为节点对象的某个属性值 | |icon |String |- |指定节点图标为节点对象的某个属性值 | |children |string |- |指定子树为节点对象的某个属性值 | |disabled |String |boolean, function(data, node) |指定节点选择框是否禁用为节点对象的某个属性值 | |isLeaf |boolean, function(data, node) |true |指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 |

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