# lt-tree

**Repository Path**: qwe2539079/lt-tree

## Basic Information

- **Project Name**: lt-tree
- **Description**: 基于Vue无限层级树形结构
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-02-09
- **Last Updated**: 2021-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### LtTree 树组件
参考uni-app插件市场中的[tree树形结构](https://ext.dcloud.net.cn/plugin?id=1000)插件。

#### 安装
``` bash
$ npm install lt-tree -S
```
#### 使用

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

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

**基本用法：**

```html
<template>
	<lt-tree :tree-data="treeData" 
		node-key="label" 
		@node-expand="handleNodeExpand" 
		@node-click="handleNodeClick">
		</lt-tree>
</template>
```
```javascript
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之后调用

```html
<template>
	<lt-tree :props="props" 
             node-key="name" 
             :load="loadNode" lazy>
	</lt-tree>
</template>
```
```javascript
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