uniapp使用树状组件插件

心已赠人 2021-09-07 06:12 1479阅读 0赞

第一步，下载组件包 [uni app 插件下载 ][uni app _]  
复制到项目里，根据目录里README.md 文档进行需求配置

view部分:

js部分使用自己的接口返回值显示列表

//引入依赖的vue
    import tkiTree from '@/components/tki-tree/tki-tree.vue';
    export default { 
    		components: { 
    			tkiTree
    		},
    		data() { 
    			return { 
    				instrument: '请选择',//选中的name显示
    				range: [{ }], //数据
    				multiple: false,
    				selectParent: false,
    				flod: false,
    				name: [], //仪表名称
    				meter_id: '', //仪表ID,
    				testList: [], //接受自己返回的数据
    				children: []
    			}
    		},
    		beforeMount() { 
    			this.init()
    		},
    		methods: { 
    			init(){ 
    				this.$http.get('/shae/bkTree', { 
    					station_id: 29
    				}).then(res => { 
    					if (res.data.result = 1) { 
    						res.data.data.forEach(item => { 
    							this.testList.push({ 
    								id: item.back_id,
    								name: item.back_name,
    								children:this.children
    							})
    							//子属性取id和name
    							item.children.forEach(items => { 
    								this.children.push({ 
    									id: items.back_id,
    									name: items.back_name
    								})
    							})
    							this.range = this.testList; //用自己的数据替换原来的数据
    						});
    					}
    				})
    			},
    			// 确定回调事件
    			treeConfirm(e) { 
    				this.instrument = e[0].name;
    			},
    			// 取消回调事件
    			treeCancel(e) { 
    				// console.log(e)
    			},
    			// 显示树形选择器
    			showTree() { 
    				this.$refs.tkitree._show();
    			},
    		},
    	}

###### 仅供本人自己学习整理，不做他用 ######

[uni app _]: https://ext.dcloud.net.cn/plugin?id=291