smart-app/components/checkboxTree.vue

<template>
    <view>
		 <form v-for="(item, index) in selectList" :key="index">
			 <!-- 一级-->
			<view class="cu-form-group " :class="index==0 ? '' :'margin-top-sm'" >
				<checkbox-group @change="chooseAll(item,index)">
				   <checkbox  :class="item.checked?'checked':''" :checked="item.checked" class="round"></checkbox>
				   <text class="title margin-left-sm">{{item.name}}</text>
				</checkbox-group>
				<view>
					<text v-if="item.show==true" class="cuIcon-fold" @click="changeShow(index,item)"></text>
					<text v-else class="cuIcon-unfold" @click="changeShow(index,item)"></text>
				</view>
			</view>
			<!-- 二级 -->
			<view v-if="item.show && item.children" v-for="(items, indexs) in item.children" :key="indexs" class="cu-form-group  " >
				<checkbox-group class="margin-left" @change="chooseOne(index,items)">
				   <checkbox :class="items.checked?'checked':''"  :checked="items.checked" class="round"></checkbox>
				   <text v-if="items.name" class="title margin-left-sm">{{items.name}}</text>
				    <text v-else class="title margin-left-sm">{{items.user_name}}</text>
				</checkbox-group>
			</view>
		 </form>
	</view>
</template>

<script>
export default {
    props: {
        selectList: {
            type: Array,
            default: [
				{
					name: '施工方',
					checked:false,//是否选中
					show:false,//是否展开，展开为子级
					children: [{name: '姓名1',checked:false,}, { name: '姓名2',checked:false,}]
				}
			]
        },
    },
    data() {
        return {

        }
    },
    methods: {
		 changeShow(index,item){//显示子节点
			if(item.show){
				this.$set(this.selectList[index], 'show', false)
			}else{
				this.$set(this.selectList[index], 'show', true)
			}
		 },
         chooseAll(item, index){//全选
			if (this.selectList[index].checked) {
			      this.$set(this.selectList[index], 'checked', false)
			      this.selectList[index].children.forEach(item => {
			          item.checked = false
			      })
			  } else {
			      this.$set(this.selectList[index], 'checked', true)
			      this.selectList[index].children.forEach(item => {
			          item.checked = true
			      })
			  }
			this.select();
		 },
		 chooseOne(index,items){//单选
			this.$set(this.selectList[index], 'checked', false)//取消父级级选中
			if(items.checked) {
				this.$set(items, 'checked', false)
			} else {
			    this.$set(items, 'checked', true)
			}
			this.select()
		 },
		 select(){
			var i=0;
			this.selectList.forEach(item => {
			if (item.children) {
			        item.children.forEach(item2 => {
			            if (item2.checked) {
			               i=i+1
			            }
			        })
			    }
			})
            //全局事件订阅只要注册的页面都可以收到回调值			
			uni.$emit('num',i)
		 }
	},
	
}
</script>

<style>
	.margin-left-sm{
		margin-left: 10rpx;
	}
	.margin-left{
		margin-left:60rpx;
	}
</style>