ai.touchui-vue 1.31.3 → 1.32.0

package/packages/tree/src/tree.vue

@@ -1,518 +1,518 @@
-<template>
-	<div :class="setClass" class="to-tree">
-		<to-tree-item
-			v-if="nodes && nodes.length > 0"
-			:data="nodes"
-			:highlight-current="highlightCurrent"
-			:expand-on-click-node="expandOnClickNode"
-			:check-on-click-node="checkOnClickNode"
-			:show-checkbox="showCheckbox"
-			:is-parent-not-checkbox="isParentNotCheckbox"
-			:accordion="accordion"
-			:children-text="childrenText"
-			:value-text="valueText"
-			:label-text="labelText"
-			:disabled-text="disabledText"
-			:is-leaf-text="isLeafText"
-			:checked-text="checkedText"
-			:expanded-text="expandedText"
-			:check-strictly="checkStrictly"
-			:filter-node-method="filterNodeMethod"
-			:auto-expand-parent="autoExpandParent"
-			:current-node-key="currentNodeKey_"
-			:icon-top="iconTop"
-			@current-change="handleCurrentNodeKeyChange"
-			@check="handleCheckChange"
-			@node-click="handleNodeClick"
-			@node-expand="handleNodeExpand"
-			@node-collapse="handleNodeCollapse"
-			>
-			<template v-slot="scope">
-				<slot :node="scope.node"></slot>
-			</template>
-		</to-tree-item>
-		<div v-else-if="!loading" class="to-align-center">
-			{{ emptyText }}
-		</div>
-		<div v-if="loading || lazyLoading">
-			<span v-if="loading || lazyLoading" class="to-icon-loading"><span></span></span>
-			{{ loadingText }}
-		</div>
-	</div>
-</template>
-<script>
-import Vue from 'vue';
-import TreeItem from './treeItem.vue';
-Vue.component('ToTreeItem', TreeItem);
-export default {
-	name: 'ToTree',
-	componentName: 'ToTree',
-	provide() {
-		return {
-			nodeDatas: this.nodes,
-			nodeMap: this.nodeMap,
-			ToTree: this
-			// 所有的tree事件回调需要通过provider交给子孙tree-item 否则递归emit会触发多次
-			// @current-change="handleCurrentNodeKeyChange"
-			// @check="handleCheckChange"
-			// @node-click="handleNodeClick"
-			// @node-expand="handleNodeExpand"
-			// @node-collapse="handleNodeCollapse"
-			// eventMap: {
-			// 	'current-change': this.handleCurrentNodeKeyChange,
-			// 	'check': this.handleCheckChange,
-			// 	'node-click': this.handleNodeClick,
-			// 	'node-expand': this.handleNodeExpand,
-			// 	'node-collapse': this.handleNodeCollapse
-			// }
-		}
-	},
-	props: {
-		// icon 离顶部的距离，单位：em
-		iconTop: {
-			type: [Number, String],
-			default: ''
-		},
-		// 是否显示 loading
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		// 是否全部展开
-		expand: Boolean,
-		// 类型，menu 类型适合展示在菜单上，icon 类型适合收缩的菜单
-		type: {
-			type: String,
-			default: ''
-		},
-		// 展示数据
-		data: {
-			type: Array,
-			default: () => []
-		},
-		// 是否高亮当前选中节点，默认值是 true
-		highlightCurrent: {
-			type: Boolean,
-			default: true
-		},
-		// 是否在点击节点的时候展开或者收缩节点， 默认值为 false，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 checkOnClickNode 为true时失效
-		expandOnClickNode: {
-			type: Boolean,
-			default: false
-		},
-		// 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
-		checkOnClickNode: {
-			type: Boolean,
-			default: false
-		},
-		// 节点是否可被选择
-		showCheckbox: {
-			type: Boolean,
-			default: false
-		},
-		// 父节点不被选择
-		isParentNotCheckbox: {
-			type: Boolean,
-			default: false
-		},
-		// 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
-		checkStrictly: {
-			type: Boolean,
-			default: false
-		},
-		// 当前选中的节点
-		currentNodeKey: {
-			type: [String, Number],
-			default: undefined
-		},
-		// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 Function(value, data, node)
-		filterNodeMethod: {
-			type: Function,
-			default: undefined
-		},
-		// 是否每次只打开一个同级树节点展开
-		accordion: {
-			type: Boolean,
-			default: false
-		},
-		// 展开子节点的时候是否自动展开父节点
-		autoExpandParent: {
-			type: Boolean,
-			default: true
-		},
-		// 内容为空的时候展示的文本
-		emptyText: {
-			type: String,
-			default: '暂无数据'
-		},
-		// 载入时展示的文本
-		loadingText: {
-			type: String,
-			default: '加载中'
-		},
-		// 指定子树为节点对象的某个属性值
-		childrenText: {
-			type: String,
-			default: 'children'
-		},
-		// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
-		valueText: {
-			type: String,
-			default: 'value'
-		},
-		// 指定节点标签为节点对象的某个属性值
-		labelText: {
-			type: [String, Function],
-			default: 'label'
-		},
-		lazy: {
-			type: Boolean,
-			default: false
-		},
-		load: {
-			type: Function,
-			default: () => []
-		},
-		// 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
-		isLeafText: {
-			type: [String, Function],
-			default: 'isLeaf'
-		},
-		// 指定节点是否禁用
-		disabledText: {
-			type: [String, Function],
-			default: 'disabled'
-		},
-		// 指定节点是否默认勾选
-		checkedText: {
-			type: [String, Function],
-			default: 'checked'
-		},
-		// 指定节点是否默认勾选
-		expandedText: {
-			type: [String, Function],
-			default: 'expanded'
-		},
-		// 展开的节点
-		expandedKeys: {
-			type: [String, Array],
-			default: () => ([])
-		},
-		// 勾选的节点
-		checkedKeys: {
-			type: [String, Array],
-			default: () => ([])
-		}
-	},
-	data() {
-		return {
-			currentNodeKey_: '',
-			lazyLoading: false,
-			nodes: [],
-			nodeMap: {}
-		}
-	},
-	computed: {
-		setClass() {
-			let arr = [];
-			if (this.type) {
-				arr.push(`to-tree-type-${this.type}`)
-			}
-			if (!this.lazy && this.data.every(item => !item[this.childrenText])) {
-				arr.push('to-tree-list')
-			}
-			return arr
-		}
-	},
-	watch: {
-		type() {
-			this.setCollapsedKeys()
-		},
-		data: {
-			handler(newval = []) {
-				this.nodes = JSON.parse(JSON.stringify(newval))
-				this.$nextTick(() => {
-					this.setExpandedKeys(Array.isArray(this.expandedKeys) ? this.expandedKeys : String(this.expandedKeys).split(','))
-					this.setCheckedKeys(Array.isArray(this.checkedKeys) ? this.checkedKeys : String(this.checkedKeys).split(','))
-					this.setCurrentKey(this.currentNodeKey)
-				})
-			},
-			deep: true,
-			immediate: true
-		},
-		expand(val) {
-			if (val) {
-				this.setExpandedKeys()
-			} else {
-				this.setCollapsedKeys()
-			}
-		},
-		expandedKeys: {
-			handler(newval = []) {
-				this.setExpandedKeys(Array.isArray(newval) ? newval : String(newval).split(','))
-			},
-			immediate: true,
-			deep: true
-		},
-		checkedKeys: {
-			handler(newval = []) {
-				this.setCheckedKeys(Array.isArray(newval) ? newval : String(newval).split(','))
-			},
-			immediate: true,
-			deep: true
-		},
-		currentNodeKey: {
-			handler(newval) {
-				// 因为是从外面传进来的，所以第一次传的值，永久就记录这个值，就一直不会变化了，所以这个地方如果连续传同一个值，是会出问题的 todo
-				this.setCurrentKey(newval)
-			},
-			immediate: true
-		}
-	},
-	mounted() {
-		if (this.lazy) {
-			this.lazyLoad((nodes) => (this.nodes = nodes))
-		}
-	},
-	methods: {
-		lazyLoad(resolve, node) {
-			if (!resolve) return
-			const _level = node ? node._level || 1 : 1
-			let res = typeof this.load === 'function' ? this.load(node) || [] : []
-			if (typeof res.then === 'function') {
-				if (node)node._loading = true
-				else this.lazyLoading = true
-				res.then((nodes) => {
-					nodes.map(node => {
-						node._level = _level + 1
-						node[this.isLeafText] ? node[this.childrenText] : node[this.childrenText] = []
-					})
-					if (node)node._loading = false
-					else this.lazyLoading = false
-					resolve(nodes)
-				})
-			} else {
-				let nodes = []
-				if (Array.isArray(res)) {
-					nodes = res
-				} else {
-					nodes = [res]
-				}
-				nodes.map(node => {
-					node._level = _level + 1
-					node[this.isLeafText] ? node[this.childrenText] : node[this.childrenText] = []
-				})
-				resolve(nodes)
-			}
-		},
-		// 对树节点进行筛选操作 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数
-		filter(str) {
-			this.$nextTick(() => {
-				for (const i in this.nodeMap) {
-					const tnode = this.nodeMap[i]
-					if (String(tnode.label).indexOf(str) > -1 || Object.values(this.nodeMap).some(cnode => String(cnode.label).indexOf(str) > -1 && cnode.parent === tnode.value)) {
-						this.$set(tnode, 'show', true)
-					} else {
-						this.$set(tnode, 'show', false)
-					}
-				}
-			})
-		},
-		// 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性
-		// (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组
-		updateKeyChildren(key, children = []) {
-			this.$nextTick(() => {
-				if (!key || !Array.isArray(children)) return
-				if (this.nodeMap[key]) {
-					this.nodeMap[key].children = children
-				}
-			})
-		},
-		// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
-		// (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
-		getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
-			const checkeds = []
-			for (const i in this.nodeMap) {
-				const node = this.nodeMap[i]
-				if (node.checked && node.value) {
-					if (!leafOnly || (leafOnly && node.isLeaf))checkeds.push(node)
-				}
-			}
-			return checkeds
-		},
-		// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
-		// (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
-		getCheckedKeys(leafOnly = false) {
-			const checkeds = []
-			for (const i in this.nodeMap) {
-				const node = this.nodeMap[i]
-				if (node.checked && node.value) {
-					if (!leafOnly || (leafOnly && node.isLeaf))checkeds.push(node.value)
-				}
-			}
-			return checkeds
-		},
-		// setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性	(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false
-		setCheckedKeys(keys = [], leafOnly = false) {
-			this.$nextTick(() => {
-				for (const i in this.nodeMap) {
-					const tnode = this.nodeMap[i]
-					if (keys.includes(tnode.value)) {
-						if (leafOnly) {
-							if (tnode.isLeaf) {
-								tnode.checked = true
-							} else {
-								tnode.checked = false
-							}
-						} else tnode.checked = true
-					} else tnode.checked = false
-				}
-			})
-		},
-		// setChecked	通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性	(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false
-		// setChecked(key,checked,setChild)
-		// getHalfCheckedNodes	若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组	-
-		// getHalfCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组	-
-		// getCurrentKey	获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null	—
-		// getCurrentNode	获取当前被选中节点的 data，若没有节点被选中则返回 null	—
-		getCurrentNode() {
-			let current = {}
-			for (const i in this.nodeMap) {
-				const node = this.nodeMap[i]
-				if (this.currentNodeKey_ === node.value) {
-					current = node
-				}
-			}
-			return current
-		},
-		// setCurrentKey	通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性	(key) 待被选节点的 key，若为 null 则取消当前高亮的节点
-		setCurrentKey(key) {
-			this.$nextTick(() => {
-				this.currentNodeKey_ = key
-				this.autoExpandParent && this.handleExpanedParent(this.nodeMap[key])
-			})
-		},
-		// setCurrentNode	通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性	(node) 待被选节点的 node
-		setCurrentNode(node) {
-			if (!node || !node[this.valueText]) return
-			this.setCurrentKey(node[this.valueText])
-		},
-		// getNode	根据 data 或者 key 拿到 Tree 组件中的 node	(data) 要获得 node 的 key 或者 data
-		getNode(key) {
-			key = typeof key === 'string' ? key : key ? key[this.valueText] : undefined
-			return this.nodeMap[key]
-		},
-		// remove	删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性	(data) 要删除的节点的 data 或者 node
-		// append	为 Tree 中的一个节点追加一个子节点	(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
-		// insertBefore	为 Tree 的一个节点的前面增加一个节点	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
-		// insertAfter	为 Tree 的一个节点的后面增加一个节点	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node
-		setExpandedKeys(keys = []) {
-			this.$nextTick(() => {
-				if (this.expand) {
-					for (const i in this.nodeMap) {
-						const tnode = this.nodeMap[i]
-						tnode.expanded = true
-					}
-				} else {
-					for (const i in this.nodeMap) {
-						const tnode = this.nodeMap[i]
-						if (keys.includes(tnode.value) || tnode.expanded) tnode.expanded = true
-						else tnode.expanded = false
-					}
-				}
-			})
-		},
-		// 收起节点
-		setCollapsedKeys(keys = []) {
-			this.$nextTick(() => {
-				// 默认展开，则全部收起
-				if (this.expand) {
-					for (const i in this.nodeMap) {
-						const tnode = this.nodeMap[i]
-						tnode.expanded = false
-					}
-				} else {
-					for (const i in this.nodeMap) {
-						const tnode = this.nodeMap[i]
-						if (keys.includes(tnode.value) || tnode.expanded) tnode.expanded = false
-						else tnode.expanded = false
-					}
-				}
-			})
-		},
-		getExpandedKeys() {
-			const expandedKeys = []
-			for (const i in this.nodeMap) {
-				const tnode = this.nodeMap[i]
-				if (tnode.expanded) expandedKeys.push(tnode.value)
-			}
-			return expandedKeys
-		},
-		// 当前节点被点击 node-click
-		handleNodeClick(node) {
-			this.$emit('node-click', node)
-		},
-		// 展开父节点
-		handleExpanedParent(node) {
-			if (!node) return
-			if (node.parent) {
-				let fnode = {}
-				for (const i in this.nodeMap) {
-					const tnode = this.nodeMap[i]
-					if (tnode.value === node.parent) {
-						fnode = tnode
-					}
-				}
-				if (fnode) {
-					fnode.expanded = true
-					this.handleExpanedParent(fnode)
-				}
-			}
-		},
-		// 当前节点expand
-		handleNodeExpand(node) {
-			const brothers = []
-			const expanded = []
-			for (const i in this.nodeMap) {
-				const bnode = this.nodeMap[i]
-				node.value !== bnode.value && bnode.parent === node.parent && brothers.push(bnode);
-				bnode.expanded && expanded.push(node.value)
-			}
-			// 开启手风琴模式时 有一个打开时关闭其他的兄弟节点
-			this.accordion &&	brothers.map(bnode => {
-				if (bnode.expanded) {
-					this.$set(bnode, 'expanded', false)
-					this.handleNodeCollapse(bnode)
-				}
-			})
-			// 懒加载 todo：待优化
-			this.lazy &&
-				(!node.children || node.children.length === 0) &&
-					this.lazyLoad((nodes) => {
-						node.children = nodes
-						this.$nextTick(() => {
-							this.setCheckedKeys(this.checkedKeys)
-						})
-					}, node)
-			this.$emit('update:expandedKeys', expanded)
-			this.$emit('node-expand', node, expanded)
-		},
-		// 当前节点collapse
-		handleNodeCollapse(node) {
-			this.$emit('update:expandedKeys', this.getExpandedKeys())
-			this.$emit('node-collapse', node)
-		},
-		// 当前节点check改变事件
-		handleCheckChange(node, checked) {
-			this.$emit('check', node, checked)
-			this.$emit('check-change', this.getCheckedKeys(), this.getCheckedNodes(), node, checked)
-		},
-		// 当前选中节点变化时触发的事件
-		handleCurrentNodeKeyChange(currentNodeKey) {
-			this.currentNodeKey_ = currentNodeKey
-			this.$emit('update:currentNodeKey', currentNodeKey)
-			this.$emit('current-change', currentNodeKey)
-		}
-	}
-};
-</script>
+<template>
+	<div :class="setClass" class="to-tree">
+		<to-tree-item
+			v-if="nodes && nodes.length > 0"
+			:data="nodes"
+			:highlight-current="highlightCurrent"
+			:expand-on-click-node="expandOnClickNode"
+			:check-on-click-node="checkOnClickNode"
+			:show-checkbox="showCheckbox"
+			:is-parent-not-checkbox="isParentNotCheckbox"
+			:accordion="accordion"
+			:children-text="childrenText"
+			:value-text="valueText"
+			:label-text="labelText"
+			:disabled-text="disabledText"
+			:is-leaf-text="isLeafText"
+			:checked-text="checkedText"
+			:expanded-text="expandedText"
+			:check-strictly="checkStrictly"
+			:filter-node-method="filterNodeMethod"
+			:auto-expand-parent="autoExpandParent"
+			:current-node-key="currentNodeKey_"
+			:icon-top="iconTop"
+			@current-change="handleCurrentNodeKeyChange"
+			@check="handleCheckChange"
+			@node-click="handleNodeClick"
+			@node-expand="handleNodeExpand"
+			@node-collapse="handleNodeCollapse"
+			>
+			<template v-slot="scope">
+				<slot :node="scope.node"></slot>
+			</template>
+		</to-tree-item>
+		<div v-else-if="!loading" class="to-align-center">
+			{{ emptyText }}
+		</div>
+		<div v-if="loading || lazyLoading">
+			<span v-if="loading || lazyLoading" class="to-icon-loading"><span></span></span>
+			{{ loadingText }}
+		</div>
+	</div>
+</template>
+<script>
+import Vue from 'vue';
+import TreeItem from './treeItem.vue';
+Vue.component('ToTreeItem', TreeItem);
+export default {
+	name: 'ToTree',
+	componentName: 'ToTree',
+	provide() {
+		return {
+			nodeDatas: this.nodes,
+			nodeMap: this.nodeMap,
+			ToTree: this
+			// 所有的tree事件回调需要通过provider交给子孙tree-item 否则递归emit会触发多次
+			// @current-change="handleCurrentNodeKeyChange"
+			// @check="handleCheckChange"
+			// @node-click="handleNodeClick"
+			// @node-expand="handleNodeExpand"
+			// @node-collapse="handleNodeCollapse"
+			// eventMap: {
+			// 	'current-change': this.handleCurrentNodeKeyChange,
+			// 	'check': this.handleCheckChange,
+			// 	'node-click': this.handleNodeClick,
+			// 	'node-expand': this.handleNodeExpand,
+			// 	'node-collapse': this.handleNodeCollapse
+			// }
+		}
+	},
+	props: {
+		// icon 离顶部的距离，单位：em
+		iconTop: {
+			type: [Number, String],
+			default: ''
+		},
+		// 是否显示 loading
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 是否全部展开
+		expand: Boolean,
+		// 类型，menu 类型适合展示在菜单上，icon 类型适合收缩的菜单
+		type: {
+			type: String,
+			default: ''
+		},
+		// 展示数据
+		data: {
+			type: Array,
+			default: () => []
+		},
+		// 是否高亮当前选中节点，默认值是 true
+		highlightCurrent: {
+			type: Boolean,
+			default: true
+		},
+		// 是否在点击节点的时候展开或者收缩节点， 默认值为 false，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 checkOnClickNode 为true时失效
+		expandOnClickNode: {
+			type: Boolean,
+			default: false
+		},
+		// 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
+		checkOnClickNode: {
+			type: Boolean,
+			default: false
+		},
+		// 节点是否可被选择
+		showCheckbox: {
+			type: Boolean,
+			default: false
+		},
+		// 父节点不被选择
+		isParentNotCheckbox: {
+			type: Boolean,
+			default: false
+		},
+		// 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+		checkStrictly: {
+			type: Boolean,
+			default: false
+		},
+		// 当前选中的节点
+		currentNodeKey: {
+			type: [String, Number],
+			default: undefined
+		},
+		// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 Function(value, data, node)
+		filterNodeMethod: {
+			type: Function,
+			default: undefined
+		},
+		// 是否每次只打开一个同级树节点展开
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		// 展开子节点的时候是否自动展开父节点
+		autoExpandParent: {
+			type: Boolean,
+			default: true
+		},
+		// 内容为空的时候展示的文本
+		emptyText: {
+			type: String,
+			default: '暂无数据'
+		},
+		// 载入时展示的文本
+		loadingText: {
+			type: String,
+			default: '加载中'
+		},
+		// 指定子树为节点对象的某个属性值
+		childrenText: {
+			type: String,
+			default: 'children'
+		},
+		// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
+		valueText: {
+			type: String,
+			default: 'value'
+		},
+		// 指定节点标签为节点对象的某个属性值
+		labelText: {
+			type: [String, Function],
+			default: 'label'
+		},
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		load: {
+			type: Function,
+			default: () => []
+		},
+		// 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
+		isLeafText: {
+			type: [String, Function],
+			default: 'isLeaf'
+		},
+		// 指定节点是否禁用
+		disabledText: {
+			type: [String, Function],
+			default: 'disabled'
+		},
+		// 指定节点是否默认勾选
+		checkedText: {
+			type: [String, Function],
+			default: 'checked'
+		},
+		// 指定节点是否默认勾选
+		expandedText: {
+			type: [String, Function],
+			default: 'expanded'
+		},
+		// 展开的节点
+		expandedKeys: {
+			type: [String, Array],
+			default: () => ([])
+		},
+		// 勾选的节点
+		checkedKeys: {
+			type: [String, Array],
+			default: () => ([])
+		}
+	},
+	data() {
+		return {
+			currentNodeKey_: '',
+			lazyLoading: false,
+			nodes: [],
+			nodeMap: {}
+		}
+	},
+	computed: {
+		setClass() {
+			let arr = [];
+			if (this.type) {
+				arr.push(`to-tree-type-${this.type}`)
+			}
+			if (!this.lazy && this.data.every(item => !item[this.childrenText])) {
+				arr.push('to-tree-list')
+			}
+			return arr
+		}
+	},
+	watch: {
+		type() {
+			this.setCollapsedKeys()
+		},
+		data: {
+			handler(newval = []) {
+				this.nodes = JSON.parse(JSON.stringify(newval))
+				this.$nextTick(() => {
+					this.setExpandedKeys(Array.isArray(this.expandedKeys) ? this.expandedKeys : String(this.expandedKeys).split(','))
+					this.setCheckedKeys(Array.isArray(this.checkedKeys) ? this.checkedKeys : String(this.checkedKeys).split(','))
+					this.setCurrentKey(this.currentNodeKey)
+				})
+			},
+			deep: true,
+			immediate: true
+		},
+		expand(val) {
+			if (val) {
+				this.setExpandedKeys()
+			} else {
+				this.setCollapsedKeys()
+			}
+		},
+		expandedKeys: {
+			handler(newval = []) {
+				this.setExpandedKeys(Array.isArray(newval) ? newval : String(newval).split(','))
+			},
+			immediate: true,
+			deep: true
+		},
+		checkedKeys: {
+			handler(newval = []) {
+				this.setCheckedKeys(Array.isArray(newval) ? newval : String(newval).split(','))
+			},
+			immediate: true,
+			deep: true
+		},
+		currentNodeKey: {
+			handler(newval) {
+				// 因为是从外面传进来的，所以第一次传的值，永久就记录这个值，就一直不会变化了，所以这个地方如果连续传同一个值，是会出问题的 todo
+				this.setCurrentKey(newval)
+			},
+			immediate: true
+		}
+	},
+	mounted() {
+		if (this.lazy) {
+			this.lazyLoad((nodes) => (this.nodes = nodes))
+		}
+	},
+	methods: {
+		lazyLoad(resolve, node) {
+			if (!resolve) return
+			const _level = node ? node._level || 1 : 1
+			let res = typeof this.load === 'function' ? this.load(node) || [] : []
+			if (typeof res.then === 'function') {
+				if (node)node._loading = true
+				else this.lazyLoading = true
+				res.then((nodes) => {
+					nodes.map(node => {
+						node._level = _level + 1
+						node[this.isLeafText] ? node[this.childrenText] : node[this.childrenText] = []
+					})
+					if (node)node._loading = false
+					else this.lazyLoading = false
+					resolve(nodes)
+				})
+			} else {
+				let nodes = []
+				if (Array.isArray(res)) {
+					nodes = res
+				} else {
+					nodes = [res]
+				}
+				nodes.map(node => {
+					node._level = _level + 1
+					node[this.isLeafText] ? node[this.childrenText] : node[this.childrenText] = []
+				})
+				resolve(nodes)
+			}
+		},
+		// 对树节点进行筛选操作 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数
+		filter(str) {
+			this.$nextTick(() => {
+				for (const i in this.nodeMap) {
+					const tnode = this.nodeMap[i]
+					if (String(tnode.label).indexOf(str) > -1 || Object.values(this.nodeMap).some(cnode => String(cnode.label).indexOf(str) > -1 && cnode.parent === tnode.value)) {
+						this.$set(tnode, 'show', true)
+					} else {
+						this.$set(tnode, 'show', false)
+					}
+				}
+			})
+		},
+		// 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性
+		// (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组
+		updateKeyChildren(key, children = []) {
+			this.$nextTick(() => {
+				if (!key || !Array.isArray(children)) return
+				if (this.nodeMap[key]) {
+					this.nodeMap[key].children = children
+				}
+			})
+		},
+		// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
+		// (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
+		getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
+			const checkeds = []
+			for (const i in this.nodeMap) {
+				const node = this.nodeMap[i]
+				if (node.checked && node.value) {
+					if (!leafOnly || (leafOnly && node.isLeaf))checkeds.push(node)
+				}
+			}
+			return checkeds
+		},
+		// 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
+		// (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
+		getCheckedKeys(leafOnly = false) {
+			const checkeds = []
+			for (const i in this.nodeMap) {
+				const node = this.nodeMap[i]
+				if (node.checked && node.value) {
+					if (!leafOnly || (leafOnly && node.isLeaf))checkeds.push(node.value)
+				}
+			}
+			return checkeds
+		},
+		// setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性	(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false
+		setCheckedKeys(keys = [], leafOnly = false) {
+			this.$nextTick(() => {
+				for (const i in this.nodeMap) {
+					const tnode = this.nodeMap[i]
+					if (keys.includes(tnode.value)) {
+						if (leafOnly) {
+							if (tnode.isLeaf) {
+								tnode.checked = true
+							} else {
+								tnode.checked = false
+							}
+						} else tnode.checked = true
+					} else tnode.checked = false
+				}
+			})
+		},
+		// setChecked	通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性	(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false
+		// setChecked(key,checked,setChild)
+		// getHalfCheckedNodes	若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组	-
+		// getHalfCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组	-
+		// getCurrentKey	获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null	—
+		// getCurrentNode	获取当前被选中节点的 data，若没有节点被选中则返回 null	—
+		getCurrentNode() {
+			let current = {}
+			for (const i in this.nodeMap) {
+				const node = this.nodeMap[i]
+				if (this.currentNodeKey_ === node.value) {
+					current = node
+				}
+			}
+			return current
+		},
+		// setCurrentKey	通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性	(key) 待被选节点的 key，若为 null 则取消当前高亮的节点
+		setCurrentKey(key) {
+			this.$nextTick(() => {
+				this.currentNodeKey_ = key
+				this.autoExpandParent && this.handleExpanedParent(this.nodeMap[key])
+			})
+		},
+		// setCurrentNode	通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性	(node) 待被选节点的 node
+		setCurrentNode(node) {
+			if (!node || !node[this.valueText]) return
+			this.setCurrentKey(node[this.valueText])
+		},
+		// getNode	根据 data 或者 key 拿到 Tree 组件中的 node	(data) 要获得 node 的 key 或者 data
+		getNode(key) {
+			key = typeof key === 'string' ? key : key ? key[this.valueText] : undefined
+			return this.nodeMap[key]
+		},
+		// remove	删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性	(data) 要删除的节点的 data 或者 node
+		// append	为 Tree 中的一个节点追加一个子节点	(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
+		// insertBefore	为 Tree 的一个节点的前面增加一个节点	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
+		// insertAfter	为 Tree 的一个节点的后面增加一个节点	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node
+		setExpandedKeys(keys = []) {
+			this.$nextTick(() => {
+				if (this.expand) {
+					for (const i in this.nodeMap) {
+						const tnode = this.nodeMap[i]
+						tnode.expanded = true
+					}
+				} else {
+					for (const i in this.nodeMap) {
+						const tnode = this.nodeMap[i]
+						if (keys.includes(tnode.value) || tnode.expanded) tnode.expanded = true
+						else tnode.expanded = false
+					}
+				}
+			})
+		},
+		// 收起节点
+		setCollapsedKeys(keys = []) {
+			this.$nextTick(() => {
+				// 默认展开，则全部收起
+				if (this.expand) {
+					for (const i in this.nodeMap) {
+						const tnode = this.nodeMap[i]
+						tnode.expanded = false
+					}
+				} else {
+					for (const i in this.nodeMap) {
+						const tnode = this.nodeMap[i]
+						if (keys.includes(tnode.value) || tnode.expanded) tnode.expanded = false
+						else tnode.expanded = false
+					}
+				}
+			})
+		},
+		getExpandedKeys() {
+			const expandedKeys = []
+			for (const i in this.nodeMap) {
+				const tnode = this.nodeMap[i]
+				if (tnode.expanded) expandedKeys.push(tnode.value)
+			}
+			return expandedKeys
+		},
+		// 当前节点被点击 node-click
+		handleNodeClick(node) {
+			this.$emit('node-click', node)
+		},
+		// 展开父节点
+		handleExpanedParent(node) {
+			if (!node) return
+			if (node.parent) {
+				let fnode = {}
+				for (const i in this.nodeMap) {
+					const tnode = this.nodeMap[i]
+					if (tnode.value === node.parent) {
+						fnode = tnode
+					}
+				}
+				if (fnode) {
+					fnode.expanded = true
+					this.handleExpanedParent(fnode)
+				}
+			}
+		},
+		// 当前节点expand
+		handleNodeExpand(node) {
+			const brothers = []
+			const expanded = []
+			for (const i in this.nodeMap) {
+				const bnode = this.nodeMap[i]
+				node.value !== bnode.value && bnode.parent === node.parent && brothers.push(bnode);
+				bnode.expanded && expanded.push(node.value)
+			}
+			// 开启手风琴模式时 有一个打开时关闭其他的兄弟节点
+			this.accordion &&	brothers.map(bnode => {
+				if (bnode.expanded) {
+					this.$set(bnode, 'expanded', false)
+					this.handleNodeCollapse(bnode)
+				}
+			})
+			// 懒加载 todo：待优化
+			this.lazy &&
+				(!node.children || node.children.length === 0) &&
+					this.lazyLoad((nodes) => {
+						node.children = nodes
+						this.$nextTick(() => {
+							this.setCheckedKeys(this.checkedKeys)
+						})
+					}, node)
+			this.$emit('update:expandedKeys', expanded)
+			this.$emit('node-expand', node, expanded)
+		},
+		// 当前节点collapse
+		handleNodeCollapse(node) {
+			this.$emit('update:expandedKeys', this.getExpandedKeys())
+			this.$emit('node-collapse', node)
+		},
+		// 当前节点check改变事件
+		handleCheckChange(node, checked) {
+			this.$emit('check', node, checked)
+			this.$emit('check-change', this.getCheckedKeys(), this.getCheckedNodes(), node, checked)
+		},
+		// 当前选中节点变化时触发的事件
+		handleCurrentNodeKeyChange(currentNodeKey) {
+			this.currentNodeKey_ = currentNodeKey
+			this.$emit('update:currentNodeKey', currentNodeKey)
+			this.$emit('current-change', currentNodeKey)
+		}
+	}
+};
+</script>