1.效果图

2.代码

<template>
	<view class="container">
		<view class="itemTop">
			<u-navbar back-text="返回" title-color="#fff" back-icon-color="#ffffff"
						:is-fixed="true" :is-back="true" 
						:back-text-style="{'color':'#fff'}"
						:background="background"  
						:custom-back="goback">		
			</u-navbar>
			<view class="itemTopbottom" @click="selectUser" >
				 <view class="pickclass" >
					<view class="valueClass">{{curValue}}</view>
				 	<u-picker mode="selector" v-model="show"  :default-selector="[0]" 
					:range="selector" @confirm="getUserName" ></u-picker>
				 </view>
				 <u-icon @click="selectUser" name="arrow-right" class="item-btn-right"></u-icon>
			</view>
		</view>
		<view class="itemTree">
			<ly-tree ref="tree" 
				:tree-data="treeData" 
				node-key="id" 
				show-checkbox 
				expand-on-check-node
				@check-change="handleCheckChange"/>
		</view>
		<view class="itemBtn" @click="submit">
			  提交
		</view>	
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				show: false,
				selector: ["JB001", "JB002", "JB003"],
				curValue :'JB001',
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				treeData: [{
					id: 1,
					label: '销售订单',
					children: [{
						id: 11,
						label: '查询'
					}]
				}, {
					id: 2,
					label: '销售发货单',
					children: [{
						id: 21,
						label: '查询'
					}]
				}, {
					id: 3,
					label: '权限管理',
					children: [{
						id: 31,
						label: '查询'} ,
					]
				}]
			};
		},
		
		onLoad(){

		},
		
		
		// 如果不需要不用到这些方法，需要删除相应代码，打印大量日志会造成性能损耗
		methods: {
			setCheckAll() {
				this.$refs.tree.setCheckAll(!this.isCheckAll);
			},
			
			selectUser(e){
				this.show = true
			},
			getUserName(e){
				console.log(JSON.stringify(e))
				this.curValue = this.selector[e]
			},
			submit(){
				
			},
			
			selectcheck(e){
				console.log(JSON.stringify(e))
			},
			
			// 从obj参数中获取全选状态checkedall
			handleCheckChange(obj) {
				this.isCheckAll = obj.checkedall;
			},
			
			goback(){
				uni.reLaunch({url:'/pages/index/index'}) //要用这个才可以
			},
			
			getCheckedKeys() {
				console.log('仅叶子节点', this.$refs.tree.getCheckedKeys(true));
				console.log('不包含半选中状态的节点', this.$refs.tree.getCheckedKeys());
				console.log('包含半选中状态的节点', this.$refs.tree.getCheckedKeys(false, true));
			}
		}
	};
</script>



<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		.itemTopbottom{
			border: solid 1rpx #e8e8e8;
			height: 80rpx;
			font-size: 36rpx;
			padding-top: 20rpx;
			padding-left: 52rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-btn-right{
				margin-right: 20rpx;
				padding-bottom: 20rpx;
				color:#e8e8e8;
			}
			.pickclass{
				color: 36rpx;
				.valueClass{
					padding-bottom: 20rpx;
				}
			}
			
		}
		.itemBtn{
			margin-top: 45rpx;
			background: #3399fe;
			padding-top: 35rpx;
			text-align: center;
			font-size: 32rpx;
			letter-spacing:4rpx;
			color: #f5ffed;
			height: 106rpx;
			width: 100%;
			border-radius: 6rpx;
			z-index: 1;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
		}
		
	}
</style>

 3.ly-tree 组件下载地址

下载地址https://ext.dcloud.net.cn/plugin?id=1000https://ext.dcloud.net.cn/plugin?id=1000