zhgdyunapp/components/tree-view/TreeView.vue

<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-view">
			<tree-node
				v-for="item in data"
				:key="item[idKey]"
				:node="item"
				:children-key="childrenKey"
				:label-key="labelKey"
				:id-key="idKey"
				:checked-ids="checkedIds"
				@check-change="handleCheckChange"
			/>
		</scroll-view>
	</view>
</template>

<script>
	import TreeNode from './TreeNode.vue';

	export default {
		name: 'TreeView',
		components: {
			TreeNode
		},
		props: {
			data: {
				type: Array,
				required: true
			},
			childrenKey: {
				type: String,
				default: 'children'
			},
			labelKey: {
				type: String,
				default: 'text'
			},
			idKey: {
				type: String,
				default: 'id'
			},
			value: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				checkedIds: [...this.value]
			}
		},
		watch: {
			value(val) {
				this.checkedIds = [...val];
			}
		},
		methods: {
			handleCheckChange(event) {
				const { id, checked } = event;
				const idx = this.checkedIds.indexOf(id);
				if (checked && idx === -1) {
					this.checkedIds.push(id);
				} else if (!checked && idx !== -1) {
					this.checkedIds.splice(idx, 1);
				}
				this.$emit('input', this.checkedIds.slice());
				this.$emit('change', this.checkedIds.slice());
				this.$emit('node-click', id, checked);
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 保持你的样式 */
	.scroll-view {
		// margin: 10rpx 26rpx;
		width: calc(100%);
		max-height: 60vh;
		border-radius: 6rpx;
		background-color: white;
	}
</style>