uni-app-使用tkiTree组件实现树形结构选择(​自定义组件 components/tki-tree/tki-tree 建议移动到子包 subpkg 内)

前言

• 在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况

• 往往需要把这个树结构当成条件来查询数据，在PC端可以使用Tree，table，Treeselect等组件展示

• 在uni-app的内置组件中似乎没有提供这样组件来展示，但是是有第三方包tkiTree组件来解决这个问题

• 我是基本使用，通过确认之后传递id和name形式来使用，据说深层次使用会有很多bug（需要自己尝试）

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

细节

• 该组件是没有提供v-model，通过确定事件获取到选择值，传递给input和form表单，

• 该组件默认选中-只需要在该节点设置checked:true（就会默认选中）

• 该组件没有类似prop这样的配置选项，就说明我们树结构的形式必须是（id，name，children）

• 该组件通过官网下载到HBuilder X之后会在components下，HBuilder X提示你需要把包放在分包里面

• 把组件全局注册就可以解决上面的问题，HBuilder X提示（​自定义组件 components/tki-tree/tki-tree 建议移动到子包 subpkg 内）- 就会消失

代码实现

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

2.全局注册组件-防止HBuilder X提示（​自定义组件 components/tki-tree/tki-tree 建议移动到子包 subpkg 内）

// 树结构组件
import tkiTree from "@/components/tki-tree/tki-tree.vue"

// 挂载全局组件
Vue.component('tkiTree', tkiTree)

具体页面代码

<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>
    export default {
        name: 'Tree',
        data() {
            return {
                // 表单值
                form: {
                    // 城市id
                    floorID: null,
                    // 城市名称
                    floorName: null
                },
                // 树结构配置\
                // 是否默认展开上一次打开-默认不打开
                foldAll: true,
                // 是否多选-默认单选
                multiple: false,
                // 是否可以选择父级-默认不能
                selectParent: false,
                // 树形数据
                floorlist: [{
                    id: 1,
                    name: '中国',
                    children: [{
                            id: 2,
                            name: '广东',
                            children: [{
                                    id: 4,
                                    name: "惠州",
                                    // 默认选中
                                    checked:true
                                },
                                {
                                    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('请先选择楼层');
                }
                // 传递楼层id
                this.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组件实现树形结构选择 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕