smart-app/pages/tree/tree.vue

<template>
	<view>
		<view class="cu-form-group solid-bottom ">
			<input placeholder="输入关键字进行过滤" v-model="filterText" ></input>
		</view>
		<ly-tree  :tree-data="treeData"
		     ref="tree"
		     node-key="id" 
			:ready="true"
			:accordion="true"
			:filter-node-method="filterNode"
			:highlightCurrent="true"
			:checkOnlyLeaf="true"
		    @node-click="handleNodeClick">
		</ly-tree>
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 侧边抽屉
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="DrawerModalL">Left</button>
					<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DrawerModalR">Right</button>
				</view>
			</view>
			<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
				<view class="bg-white cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
					<scroll-view scroll-y="true" style="height: 100%;">
					<view class="cu-list menu text-left">
						 <view class="cu-form-group solid-bottom ">
						 	<input placeholder="输入关键字进行过滤" v-model="filterTextLeft" ></input>
						 </view>
						 <ly-tree  :tree-data="treeData"
						     ref="treeLeft"
						     node-key="id" 
						 	:ready="true"
							:accordion="true"
						 	:filter-node-method="filterNodeLeft"
						 	:highlightCurrent="true"
						 	:checkOnlyLeaf="true"
						     @node-click="handleNodeClick">
						 </ly-tree>
					</view>
				    </scroll-view>
				</view>
			</view>
			
			<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
				<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="bg-white cu-list tabbar menu text-left" style="margin-bottom: 100px;">
							 <view class="cu-form-group solid-bottom ">
							 	<input placeholder="输入关键字进行过滤" v-model="filterTextRight" ></input>
							 </view>
							 <ly-tree  :tree-data="treeData"
							     ref="treeRight"
							     node-key="id" 
								:defaultExpandAll="true"
							 	:ready="true"
								:accordion="true"
							 	:filter-node-method="filterNodeRight"
							 	:highlightCurrent="true"
							 	:checkOnlyLeaf="true"
							     @node-click="handleNodeClick">
							 </ly-tree>
						</view>
					</scroll-view>
				</view>
			</view>
	</view>
   
</template>
<script>
		export default {
			data() {
				return {
					CustomBar: this.CustomBar,
					modalName: null,
					filterText:"",
					filterTextLeft:"",
					filterTextRight:"",
					ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
					treeData: [{
						id: 1,
						label: '一级 1',
						children: [{
							id: 11,
							label: '二级 1-1',
							children: [{
								id: 111,
								label: '三级 1-1-1'
							},{
								id: 112,
								label: '三级 1-1-2'
							}]
						}]
					}, {
						id: 2,
						label: '一级 2',
						children: [{
							id: 21,
							label: '二级 2-1',
							children: [{
								id: 211,
								label: '三级 2-1-1'
							}]
						}, {
							id: 22,
							label: '二级 2-2',
							children: [{
								id: 221,
								label: '三级 2-2-1'
							}]
						}]
					}, {
						id: 3,
						label: '一级 3',
						children: [{
							id: 31,
							label: '二级 3-1',
							children: [{
								id: 311,
								label: '三级 3-1-1'
							}]
						}, {
							id: 32,
							label: '二级 3-2',
							children: [{
								id: 321,
								label: '三级 3-2-1'
							}]
						}]
					}],
				};
			},
			methods: {
				handleNodeClick(obj) {
					console.log("子节点信息:",obj);
					console.log("子节点路径:",this.$refs.tree.getNodePath(obj))
				},
				filterNode(value, data) {
					if (!value) return true;
					return data.label.indexOf(value) !== -1;
				},
				filterNodeLeft(value, data) {
					if (!value) return true;
					return data.label.indexOf(value) !== -1;
				},
				filterNodeRight(value, data) {
					if (!value) return true;
					return data.label.indexOf(value) !== -1;
				},
				showModal(e) {
					this.modalName = e.currentTarget.dataset.target
				},
				hideModal(e) {
					this.modalName = null
				},
			},
			watch:{
				filterText(val) {
					this.$refs.tree.filter(val);
				},
				filterTextLeft(val) {
					this.$refs.treeLeft.filter(val);
				},
				filterTextRight(val) {
					this.$refs.treeRight.filter(val);
				},
			}
		};
</script>
<style></style>