前言
-
在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况
-
往往需要把这个树结构当成条件来查询数据,在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组件实现树形结构选择 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!文章来源:https://www.toymoban.com/news/detail-629943.html
什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-629943.html
到了这里,关于uni-app-使用tkiTree组件实现树形结构选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!