guosen-ldt-mall/pages/chooseLable/chooseLable.vue

<template>
	<view>
		<mp-tree v-slot:default="{item}" :checkList="checkList" v-if="tree.length>0"  :props="prop"
			@sendValue="confirm" :parent="false" :isCheck="true" :trees="tree">
			<!-- 内容插槽 -->
			<view>
				<view class="content-item">
					<view class="word">{{item.dictKey}}</view>
				</view>
			</view>
		</mp-tree>

	</view>
</template>

<script>
	import mpTree from '@/components/mp-tree/tree.vue';
	export default {
		components: {
			mpTree
		},
		data() {
			return {
				tree: [],
				checkList: [{
					dictKey: "美食",
					dictValue: "美食",
					hasChildren: true,
					id: "1430416319940947969"
				}],
				prop: {
					label: 'dictKey',
					children: 'children',
					multiple: true,
					checkStrictly: true
				},
			}
		},
		onLoad(option) {
			this.getLabel()
		},
		methods: {
			getLabel(){
				let params={
					code:'business_label'
				}
				this.$api.dict.dictionaryTree(params).then(res=>{
					this.tree=res.data
				})
			},
			//获取选中的值
			confirm(val, back) {
				let checkList=[]
				val.forEach(item=>{
					let obj={
						id:item.id,
						hasChildren:item.hasChildren,
						dictKey:item.dictKey,
						dictValue:item.dictValue
					}
					checkList.push(obj)
				})
				console.log(checkList);
			},
		}
	}
</script>

<style lang="scss">
	.box_sizing {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.btn {
		position: fixed;
		bottom: 0;
		padding: 10px;
		background-color: #fff;
		width: 100%;

		.sureBtn {
			background-color: #0095F2;
			color: #fff;
		}
	}

	.content-item {
		display: flex;
		position: relative;
		align-items: center;

		.person {
			height: 64rpx;
			min-width: 64rpx;
			border-radius: 50%;
			border: 1rpx solid rgba(0, 149, 235, 0.15);
			background-color: rgba(0, 149, 235, 0.1);
			margin-left: 0px;
			color: #0095F2;
			line-height: 64rpx;
			font-size: 22rpx;
			text-align: center;
			margin-left: 20rpx;
		}

		.word {
			margin-left: 16rpx;
			font-size: 30rpx;
			color: #5b5757;
			width: 500rpx;
			word-break: break-all;
		}
	}
</style>