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

这篇具有很好参考价值的文章主要介绍了uni-app-使用tkiTree组件实现树形结构选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

  • 往往需要把这个树结构当成条件来查询数据,在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 内)- 就会消失

uni-app-使用tkiTree组件实现树形结构选择,uni-app-小程序,uni-app,tkiTree组件,Treeselect,树形结构选择

代码实现

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组件实现树形结构选择 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-629943.html

到了这里,关于uni-app-使用tkiTree组件实现树形结构选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

    官方帮助文档:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 进行一些简单的配置 Uniapp提供的位置相关的服务: https://uniapp.dcloud.net.cn/api/location/location.html UniApp提供的地图组件 https://uniapp.dcloud.net.cn/component/map.html 文档针对微信小程序进行设置,其他端使用这些组件还需要参

    2023年04月26日
    浏览(63)
  • uni-app之使用内置组件Canvas

    UniApp 是一个基于 Vue.js 的跨平台开发框架,它允许开发者使用一套代码同时构建多个平台的应用程序。UniApp 提供了丰富的内置组件,其中包括 Canvas 组件,用于在应用中绘制图形和实现图形动画效果。本文将详细介绍 UniApp 内置组件 Canvas 的使用方法,以及提供示例代码和说明

    2024年02月12日
    浏览(43)
  • uni-app自定义组件及拓展(uni-ui)组件的使用

    UniApp 是一个基于 Vue.js 的跨平台应用框架,可以用来开发同时运行在多个平台(如微信小程序、支付宝小程序、App等)的应用程序。在 UniApp 中,组件的使用与 Vue.js 中的组件使用基本类似,但需要考虑跨平台兼容性。 1. 创建组件文件 在 UniApp 项目中创建一个新的组件,通常

    2024年04月29日
    浏览(55)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(98)
  • uni-app小程序父组件数据更新,实现自定义组件刷新视图

    之前错误的思路 新思路(忽略我的参数命名,写文章的时候方便。)

    2024年02月16日
    浏览(51)
  • uni-app nvue页面中使用video视频播放组件

    我遇到的问题是,在nvue页面引用video组件,然后啥也没显示的,显示了无法控制播放,折腾了好久,在这里记录下来!希望可以帮助到需要的人 我的代码是这样的(src换成官方的举例)  问题1:视频页面一片空白,后来去查官方文档是这样说的 我以为按照官方提示勾选 ma

    2024年02月03日
    浏览(45)
  • uni-app使用富文本组件 mp-html

    目录 安装 npm install mp-html  vue页面 富文本增加js组件  安装 npm install mp-html  vue页面 富文本增加js组件   fuwenben.js 解决连续数字、字母不自动换行 p标签:word-wrap: break-word; 解决pre不自动换行: white-space:pre-wrap; 合并表格的边框:border-collapse: collapse; 前 后

    2024年02月16日
    浏览(41)
  • uni-app之Cover-View组件详细使用教程

    在 UniApp 中,Cover-View 组件是一种用于展示覆盖在页面上方的视图元素的组件。它可以用于创建各种遮罩、弹出层、悬浮按钮等效果,提供了更多自定义样式和交互的可能性。本教程将详细介绍 Cover-View 组件的用法和示例代码。 步骤1:创建一个 UniApp 项目 首先,确保已经安装

    2024年02月07日
    浏览(188)
  • uni-app 使用v-model封装picker组件和自定义样式

    1、v-model封装picker组件 (1)封装组件myPicker.vue (2)组件调用 (3)属性说明 属性名 类型 默认值 说明 options Object 数据选项,默认[{ name: \\\"办公\\\", value: \\\"1\\\" }]格式 rangeKey String label 数据选项的属性名 rangeValue String value 数据选项的属性值 placeholoder String 请选择 未选择数据时的默认

    2024年02月09日
    浏览(54)
  • uni-app开发使用uni-ui组件uni-data-checkbox编译微信小程序报错

    uniapp开发使用uni-ui控件uni-data-checkbox,编译成微信小程序报错VM50 WAService.js:1 TypeError: Cannot read property \\\'length\\\' of undefined,并且页面无法显示。  解决方法: 1、 HBuilder X 编译器下载 sass 或更新 HBuilder X 版本 2、更新uni-ui组件库 3、如果不使用uniCloud就注释uni-data-checkbox.vue文件中的

    2024年02月06日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包