当前位置：首页 > news >正文

uni-app-使用tkiTree组件实现树形结构选择

news 2025/8/5 3:43:20

前言

在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况
往往需要把这个树结构当成条件来查询数据，在PC端可以使用Tree，table，Treeselect等组件展示
在uni-app的内置组件中似乎没有提供这样组件来展示，但是是有第三方包tkiTree组件来解决这个问题
我是基本使用，通过确认之后传递id和name形式来使用，据说深层次使用会有很多bug（需要自己尝试）

官网包地址：树形选择器增强版，支持多选、单选、父级选择，Picker形式 - DCloud 插件市场

细节

该组件是没有提供v-model，通过确定事件获取到选择值，传递给input和form表单，回显如此
该组件没有类似prop这样的配置选项，就说明我们树结构的形式必须是（id，name，children）
该组件通过官网下载到HBuilder X之后会在components下，HBuilder X提示你需要把包放在分包里面
该组件移动到page/common/下面（我用这种方式），HBuilder X也会提示相同报错-暂时没找到解决方法

代码实现

1.通过上面官网地址去到插件市场-点击下载插件并导入HBuilder X-会在components下出现（我挪到了page/common/下面）-- 下载插件需要HBuilder 账号密码登录

2.具体页面代码-注意包的引入位置

<template><view class="Treeform">选择城市: <uni-easyinput @focus="focusfloor" v-model="form.floorName" placeholder="选择城市"></uni-easyinput><!-- 树形组件 --><tki-tree ref="tkitree" :range="floorlist" :foldAll="foldAll" :multiple="multiple" :selectParent="selectParent"rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree></view>
</template>

<script>import tkiTree from '@/pages/common/tki-tree/tki-tree.vue';export default {name: 'Tree',components: {tkiTree},data() {return {// 表单值form: {// 城市idfloorID: null,// 城市名称floorName: null},// 树结构配置\// 是否默认展开上一次打开-默认不打开foldAll: true,// 是否多选-默认单选multiple: false,// 是否可以选择父级-默认不能selectParent: false,// 树形数据floorlist: [{id: 1,name: '中国',children: [{id: 2,name: '广东',children: [{id: 4,name: "惠州"},{id: 5,name: "仲恺"},{id: 6,name: '深圳'}]}, {id: 3,name: '湖北'},{id: 8,name: '福建'}]}],};},methods: {// 输入款获取焦点事件focusfloor() {console.log('输入款获取焦点了');// 打开树形选择器this.$refs.tkitree._show();},// 确定回调事件treeConfirm(e) {console.log(e)// 必须选择if (e.length == 0) {return console.log('请先选择楼层');}// 传递楼层idthis.form.floorID = e[0].id// 传递楼层名称this.form.floorName = e[0].name},// 取消回调事件treeCancel(e) {console.log(e)},}}
</script>

<style lang="scss">.Treeform {display: flex;align-items: center;}
</style>

总结：

经过这一趟流程下来相信你也对 uni-app-使用tkiTree组件实现树形结构选择有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！