realty/virgo.wzfrontend/console/src/components/common/house/treeDetail.vue

<template>
	<div class="project-item-tree-select">
		<el-collapse v-model="active">
			<el-collapse-item :name="index" v-for="(item,index) in options" :key="item.id">
				<template slot="title">
					<i class="iconfont huifont-shuzhuangcaidantubiao"></i>
					<span class="el-collapse-name">{{item.name}}</span>
				</template>
				<div>
					<el-tree :ref="'houseTree' + item.id" :data="item.children" :props="defaultProps"
						default-expand-all>
					</el-tree>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	import {
		getHouseTree,
	} from '@/httpApi/space'
	import {
		roomCheckedList
	} from '@/uitls'
	export default {
		props: ['ids'],
		data() {
			return {
				options: [],
				defaultProps: {
					children: 'children',
					label: 'optionName'
				},
				idsBox: [],
				active: []
			}
		},
		created() {
			this.idsBox = this.ids.split(',');
			this.init();
		},
		methods: {
			init() {
				getHouseTree(this.$store.getters.project.id).then(res => {
					if (res.state) {
						this.options = roomCheckedList(res.data.projectItemList || [], this.idsBox);
						for (let i = 0; i < this.options.length; i++) {
							this.active.push(i)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.project-item-tree-select {
		flex: 1;
		height: 0;
		overflow-y: auto;

		.el-tree {
			.el-tree-node__label {
				left: 5px;
			}
		}

		.el-collapse {
			border: none;

			.el-collapse-item__header {
				background: #1E2430;
				color: $--color-common !important;
				border-color: $--color-border;
				height: 32px;
				line-height: 32px;
				font-size: 12px;
				padding: 0 14px;

				.el-collapse-name {
					flex: 1;
					width: 0;
					overflow: hidden;
				}

				.iconfont {
					color: $--color-common !important;
					margin-right: 6px;
				}

				.huifont-bumen {
					font-size: 16px;
				}

				.huifont-shuzhuangcaidantubiao,
				.huifont-moxingguanli {
					font-size: 18px;
				}
			}

			.el-collapse-item__wrap {
				background: #151c26;
				border: none;
			}

			.el-collapse-item__header.is-active,
			.el-collapse-item__header:hover,
			.el-collapse-item__header:focus {
				color: $--color-common;
				background: #262C38;
			}

			.el-icon-arrow-right {
				font-family: 'iconfont' !important;
				font-size: 9px;
				margin: 0;
			}

			.el-icon-arrow-right::before {
				content: '\e738';
			}

			.el-collapse-item__content {
				padding-bottom: 0;
				color: $--color-common;
				font-size: 12px;
			}
		}
	}
</style>