uniapp 如何使用 tki-tree树形选择器，可支持增强版，支持多选、单选、父级选择，Picker形式等等

地址：https://ext.dcloud.net.cn/plugin?id=702，里面有详细的文档

安装成功引入

import tkiTree from "@/components/tki-tree/tki-tree.vue"
export default {
    components: {tkiTree}
}

使用

<view v-if="range">
	<!--
		selectParent：父级可不可选
		foldAll：关闭选择框是否保留上次自己打开的哪一级
		multiple：false为单选，true为多选
		rangeKey：这个是关键,主要拿你数组有什么下标名吧，比如我这里有 dir_name为名字
		@confirm：返回选择器选中的内容
		@cancel：取消的回调事件
	 -->
	<tki-tree ref="tkitree" :range="range" :selectParent="true" :foldAll="true" :multiple="false"  :rangeKey="dir_name"
	confirmColor="#4e8af7"
	 @confirm="treeConfirm"></tki-tree>
</view>

我这个是动态的请求api，所以请求回来的数据是不会自动弄成 tki-tree 想要的树形结构的

	this.range = [];
	let obj = {};
	let data = {};
	data = value.data.rows
	let parentList = [];
	for (let i = 0; i < data.length; i++) {
		// 把每一条数据的下标 赋值成 数据的id
	    obj[data[i]['id']] = data[i]
	}
	for(let j = 0; j < data.length; j++){
		let list = data[j];
		// 拿 parent_info_id 的id跟obj的下标比较，如果存在就是他的 children
		// 这里你们的数据是根据什么区分的，就用什么数据字段去判断
		let parentList = obj[list['parent_info_id']];
		if(parentList){
			if(!parentList['children']){
				parentList['children'] = [];
			}
			parentList['children'].push(list);
		}else{
			this.range.push(list);
		}
	}

返回的数据

效果

注：一定要加 rangeKey 的name字段，比较坑的还是这个，没有加就不会显示字什么的