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

原创

已于 2023-11-30 16:59:25 修改 · 1.3w 阅读

收录于

当前文章被以下社区和专栏收录：

于 2022-03-21 23:42:55 首次发布

本文介绍如何在DCloud插件市场中使用tki-tree组件创建一个支持多选、单选和父级选择的树形选择器，并通过JavaScript动态加载数据。实例展示了如何配置组件和处理选中项的事件。

根据：树形选择器增强版，支持多选、单选、父级选择，Picker形式 - DCloud 插件市场

树形选择器：使用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: '湖南省',

标签