zhgdyunapp/components/tree-view/TreeNode.vue

<template>
	<view>
		<view class="cell-box" :style="{ backgroundColor: checked ? checkedBgColor : '#fff' }">
			<view class="expand-icon" v-if="hasChildren" @click.stop="toggleExpand">
				<view :class="['triangle', expanded ? 'down' : 'right']"></view>
			</view>
			<view class="label">{{ node[labelKey] }}</view>
			<checkbox-group v-if="multiple" @change="onCheck">
				<checkbox :disabled="node.disabled" :value="String(node[idKey])" :checked="checked"
					style="margin-left: 10rpx;" />
			</checkbox-group>
			<radio-group v-else @change="onRadio">
				<template v-if="showKey">
					<radio v-if="snode[showKey] == 2" :disabled="node.disabled" :value="String(node[idKey])"
						:checked="checked" style="margin-left: 10rpx;" />
				</template>
				<radio v-else :disabled="node.disabled" :value="String(node[idKey])" :checked="checked"
					style="margin-left: 10rpx;" />
			</radio-group>
		</view>
		<view v-if="hasChildren && expanded" style="padding-left: 30rpx;">
			<tree-node v-for="child in node[childrenKey]" :key="child[idKey]" :node="child" :children-key="childrenKey"
				:label-key="labelKey" :id-key="idKey" :show-key="showKey" :checked-bg-color="checkedBgColor"
				:multiple="multiple" :checked-ids="checkedIds" :default-expanded="defaultExpanded"
				@check-change="$emit('check-change', $event)" />
		</view>
	</view>
</template>

<script>
	import TreeNode from './TreeNode.vue'
	export default {
		name: 'TreeNode',
		components: {
			TreeNode
		},
		props: {
			node: {
				type: Object,
				required: true
			},
			childrenKey: {
				type: String,
				required: true
			},
			labelKey: {
				type: String,
				required: true
			},
			idKey: {
				type: String,
				required: true
			},
			showKey: {
				type: String,
				required: false
			},
			checkedIds: {
				type: Array,
				required: true
			},
			parentPath: {
				type: Array,
				default: () => []
			},
			checkedBgColor: {
				type: String,
				default: '#fff'
			}, // 你喜欢的默认色
			multiple: {
				type: Boolean,
				default: true
			},
			defaultExpanded: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				expanded: this.defaultExpanded
			}
		},
		watch: {
			defaultExpanded(val) {
				this.expanded = val;
			}
		},
		computed: {
			checked() {
				return this.checkedIds.includes(this.node[this.idKey]);
			},
			hasChildren() {
				return Array.isArray(this.node[this.childrenKey]) && this.node[this.childrenKey].length > 0;
			},
		},
		methods: {
			onCheck(e) {
				this.$emit('check-change', {
					id: this.node[this.idKey],
					label: this.node[this.labelKey],
					checked: e.detail.value.length > 0
				});
			},
			onRadio(e) {
				// radio-group change 事件 e.detail.value 是选中的 value
				this.$emit('check-change', {
					id: this.node[this.idKey],
					label: this.node[this.labelKey],
					checked: e.detail.value === String(this.node[this.idKey])
				});
			},
			toggleExpand() {
				this.expanded = !this.expanded;
			},
		}
	}
</script>

<style scoped lang="scss">
	.cell-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		//   padding: 26rpx 32rpx;
		padding: 18rpx 32rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		line-height: 54rpx;
		color: #606266;
		background-color: #fff;
		text-align: left;

		.expand-icon {
			width: 20rpx;
			text-align: center;
			cursor: pointer;
			margin-right: 8rpx;
			user-select: none;
			font-size: 16rpx;
		}

		.label {
			flex: 1;
			margin-right: 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.box-active {
			color: rgb(49, 144, 243);
		}

		>image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	/* 用border画三角形 */
	.triangle {
		width: 0;
		height: 0;
		border-style: solid;
	}

	.right {
		border-width: 8rpx 0 8rpx 10rpx;
		border-color: transparent transparent transparent #4D4D4D;
	}

	.down {
		border-width: 10rpx 8rpx 0 8rpx;
		border-color: #4D4D4D transparent transparent transparent;
	}
</style>