射阳网站开发,安康网站开发公司,常州百度网站排名优化,wordpress js代码插件下载前言 在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况 往往需要把这个树结构当成条件来查询数据#xff0c;在PC端可以使用Tree#xff0c;table#xff0c;Treeselect等组件展示 在uni-app的内置组件中似乎没有提供这样组件来展示#x…前言 在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况 往往需要把这个树结构当成条件来查询数据在PC端可以使用TreetableTreeselect等组件展示 在uni-app的内置组件中似乎没有提供这样组件来展示但是是有第三方包tkiTree组件来解决这个问题 我是基本使用通过确认之后传递id和name形式来使用据说深层次使用会有很多bug需要自己尝试
官网包地址树形选择器增强版支持多选、单选、父级选择Picker形式 - DCloud 插件市场
细节 该组件是没有提供v-model通过确定事件获取到选择值传递给input和form表单回显如此 该组件没有类似prop这样的配置选项就说明我们树结构的形式必须是idnamechildren 该组件通过官网下载到HBuilder X之后会在components下HBuilder X提示你需要把包放在分包里面 该组件移动到page/common/下面我用这种方式HBuilder X也会提示相同报错-暂时没找到解决方法
代码实现
1.通过上面官网地址去到插件市场-点击下载插件并导入HBuilder X-会在components下出现我挪到了page/common/下面-- 下载插件需要HBuilder 账号密码登录
2.具体页面代码-注意包的引入位置
templateview classTreeform选择城市: uni-easyinput focusfocusfloor v-modelform.floorName placeholder选择城市/uni-easyinput!-- 树形组件 --tki-tree reftkitree :rangefloorlist :foldAllfoldAll :multiplemultiple :selectParentselectParentrangeKeyname confirmtreeConfirm canceltreeCancel/tki-tree/view
/template
scriptimport 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 langscss.Treeform {display: flex;align-items: center;}
/style
总结 经过这一趟流程下来相信你也对 uni-app-使用tkiTree组件实现树形结构选择 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
