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

前言

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

  • 往往需要把这个树结构当成条件来查询数据,在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.具体页面代码-注意包的引入位置

总结:


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

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

你可能感兴趣的:(uni-app-小程序,uni-app,tkiTree组件,Treeselect,树形结构选择)