uniapp的树形选择器，tki-tree组件

根据：

树形选择器：使用tki-tree组件：

先导入并注册组件：

在javascript中：export default外放import，在export default内data外放注册components

import tkiTree from "@/commons/tki-tree/tki-tree.vue"
components: {
			tkiTree,
		},

在template中写：

<tki-tree ref="tkitree" :range="range" :rangeKey="rangeKey" confirmColor="#4e8af7" />

在data的return中写:

data() {
			return {
				ascName: ,
				userId: ,
				list: {

					"address": "",
					"asc": "",
					"dept": "",
					"email": "",
					"idNumber": "",
					"phone": "",
					"realName": ""

				},
				duoxuan: [{
					id: 6,
					name: 湖南省,
				}, ]
			}
		},

在javascript内data外写：

let testList = [{
			id: 1,
			name: 北京市,
			children: [{
				id: 11,
				name: 市辖区,
				children: [{
						id: 111,
						name: 西城区,
						children: [{
							id: 1111,
							name: 南河沿大街,
							children: [{
								id: 11111,
								name: 紫金宫饭店,
								checked: true
							}, ]
						}, ]
					},
					{
						id: 112,
						name: 东城区,
					},
					{
						id: 113,
						name: 朝阳区,
					},
					{
						id: 114,
						name: 丰台区,
					}
				]
			}, ]
		},
		{
			id: 2,
			name: 河北省,
			children: [{
					id: 21,
					name: 石家庄市,
				},
				{
					id: 22,
					name: 唐山市,
				},
				{
					id: 23,
					name: 秦皇岛市,
				},
			]
		},
		{
			id: 3,
			name: 山东省,
			children: [{
					id: 31,
					name: 济南市,
					children: [{
							id: 311,
							name: 历下区,
							children: [{
								id: 3131,
								name: 解放路街道办事处,
							}, ]
						},
						{
							id: 312,
							name: 槐荫区,
						},
						{
							id: 313,
							name: 天桥区,
						},
						{
							id: 314,
							name: 历城区,
						},
						{
							id: 315,
							name: 长清区,
						}
					]
				},
				{
					id: 32,
					name: 青岛市,
				},
				{
					id: 33,
					name: 临沂市,
					children: [{
							id: 331,
							name: 兰山区,
							children: [{
								id: 3331,
								name: 金雀山街道,
							}, ]
						},
						{
							id: 332,
							name: 河东区,
						},
						{
							id: 333,
							name: 罗庄区,
							children: [{
								id: 3331,
								name: 盛庄街道,
							}, ]
						}
					]
				},
				{
					id: 34,
					name: 日照市,
				},
				{
					id: 35,
					name: 淄博市,
				},
				{
					id: 36,
					name: 枣庄市,
				},
				{
					id: 37,
					name: 东营市,
				},
				{
					id: 38,
					name: 潍坊市,
				},
				{
					id: 39,
					name: 烟台市,
				},
				{
					id: 40,
					name: 济宁市,
				},
				{
					id: 41,
					name: 泰安市,
				},
				{
					id: 42,
					name: 威海市,
				},
				{
					id: 43,
					name: 滨州市,
				},
				{
					id: 44,
					name: 菏泽市,
				},
			]
		},
		{
			id: 4,
			name: 河南省,
		},
		{
			id: 5,
			name: 湖北省,
		},
		{
			id: 6,
			name: 湖南省,
		}
	]

页面加载时调用：

onLoad() {
			setTimeout(() => {
				this.duoxuan = testList;
			}, 300)

案例：

树标签：

<tki-tree ref="tkitree" :selectParent=true :range="treeData" title="请选择" rangeKey="name"
			confirmColor="#4e8af7" @confirm="selectAsc" />

事件：赋值给data表单(自己data里面写啥就把data这4个字换成啥)，用来保存新增之类的提交给后端API接口的。

selectAsc(e) {
				this.data.asc = e[0].id
				this.data.ascName = e[0].name
			},

举个官网栗子（官网导入的好像不行，可以看看我这个）：

链接：https://pan.baidu.com/s/1lsR1OeGU74fLvferbqM-DA 提取码：Cwei