mes_mobile/pages/person/myAuthority.vue

<template>
	<view class="page_padding">
		<!-- <checkbox-group @change="checkboxChange">
			<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
				<view>
					<checkbox :value="item.value" :checked="item.checked" />
				</view>
				<view>{{item.name}}</view>
			</label>
		</checkbox-group> -->
		<view class="contentboxsty" v-for="(item, index) in list" :key="index.id">
			<view class="list_name">
				<checkbox-group @change="changeCheckbox">
					<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
				</checkbox-group>
				<!-- <checkbox-group @change="selectPath(e,item)">
					<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
				</checkbox-group> -->
				<!-- <text class="t-icon t-icon-xuanzhong padd_rigth12" @click="selectPath($event.target,item)"></text> -->
				 {{item.name}}{{item.checked}}
			</view>
			<view class="list_content" v-for="(i, ind) in item.child" :key="ind">
				<view class="content_name">
					<checkbox-group @change="selectPath(e,i)">
						<checkbox value="cb" class="checkbox-backgroun-yellow" :value="i.id" :checked="i.checked" style="transform:scale(0.7)" />
					</checkbox-group>
					<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
					<text class="">{{i.name}}</text>
				</view>
				<view class="content_item">
					<view class="content_data" v-for="(btn, inx) in i.child" :key="inx">
						<checkbox-group @change="selectPath(e,i)">
							<checkbox value="cb" class="checkbox-backgroun-yellow" :value="btn.id" :checked="btn.checked" style="transform:scale(0.7)" />
						</checkbox-group>
						<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
						<text class="">{{btn.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				],
			list:[
					{name:'首页',checked:true,id:1,child:[{
							id: 2,
							name:'控制台',
							checked:true,
							child:[
								{id:121,name:'设备信息',},
								{id:122,name:'生产加工信息',},
								{id:123,name:'生产加工信息',},
								{id:124,name:'账号信息',},
								{id:125,name:'通知设置',},
								{id:126,name:'升级角色'},],
							},
						],
					},
					// {name:'生产工单',id:11,child:[{
					// 		id: 3,
					// 		name:'待生产工单',
					// 		child:[{name:'添加工单'},
					// 			{name:'审核工单'},
					// 			{name:'删除工单'},
					// 			],
					// 		},
					// 		{name:'已排产工单',
					// 		child:[],
					// 		},
					// 	],
					// }
				],
				arr:[]
			}
		},
		methods: {
			checkboxChange: function (e) {
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				console.log(items)
			},
			changeCheckbox(e){
				console.log(e)
				// var items = this.list,
				// 	values = e.detail.value;
				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if(values.includes(item.value)){
				// 		this.$set(item,'checked',true)
				// 	}else{
				// 		this.$set(item,'checked',false)
				// 	}
				// }
				// console.log(items)
			},
			selectPath(e,item){
				console.log(e,item,222)
			},
		}
	}
</script>

<style>
.contentboxsty{padding: 14px 12px;margin-bottom: 12px;}
.list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid #2D3A6F;}
.content_name{padding:8px 0 ;display: flex;align-items: center;}
.content_item{display: flex;align-items: center;flex-wrap: wrap;}
.content_data{padding: 4px 15px 4px 0;display: flex;align-items: center;}

/* 复选框-背景颜色 */
checkbox.checkbox-backgroun-yellow[checked] .wx-checkbox-input,
checkbox.checkbox-backgroun-yellow.checked .uni-checkbox-input{
	background-color: #009688 !important;
	border-color: #009688 !important;
	color: #ffffff !important;
}
	
</style>