第一步，下载组件包 uni app 插件下载
复制到项目里，根据目录里README.md 文档进行需求配置

view部分:

<template>
	<view>
		<view class="subNav">
			<view class="subNav-icon icon2">
				<!--@tap="showTree"唤醒树组件-->
				<image src="../static/img/admin/right.png" @tap="showTree" mode=""></image>
			</view>
		</view>

		<tki-tree ref="tkitree" :selectParent="false" :multiple="false" :range="range" :foldAll="flod" rangeKey="name"
		 @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
	</view>
</template>

js部分使用自己的接口返回值显示列表

//引入依赖的vue
import tkiTree from '@/components/tki-tree/tki-tree.vue';
export default {
		components: {
			tkiTree
		},
		data() {
			return {
				instrument: '请选择',//选中的name显示
				range: [{}], //数据
				multiple: false,
				selectParent: false,
				flod: false,
				name: [], //仪表名称
				meter_id: '', //仪表ID,
				testList: [], //接受自己返回的数据
				children: []
			}
		},
		beforeMount() {
			this.init()
		},
		methods: {
			init(){
				this.$http.get('/shae/bkTree', {
					station_id: 29
				}).then(res => {
					if (res.data.result = 1) {
						res.data.data.forEach(item => {
							this.testList.push({
								id: item.back_id,
								name: item.back_name,
								children:this.children
							})
							//子属性取id和name
							item.children.forEach(items => {
								this.children.push({
									id: items.back_id,
									name: items.back_name
								})
							})
							this.range = this.testList; //用自己的数据替换原来的数据
						});
					}
				})
			},
			// 确定回调事件
			treeConfirm(e) {
				this.instrument = e[0].name;
			},
			// 取消回调事件
			treeCancel(e) {
				// console.log(e)
			},
			// 显示树形选择器
			showTree() {
				this.$refs.tkitree._show();
			},
		},
	}

仅供本人自己学习整理，不做他用