el-tree选中数据重组成树

vue+element-ui 实现el-tree选择重新生成一个已选中的值组成新的数据树，效果如下

<template>
	<div  class="flex">
		<el-tree class="tree-row" :data="list" ref="tree" :props="{children: 'children', label: 'itemCategoryName'}" show-checkbox node-key="id" default-expand-all  @check-change="getChecked">
		</el-tree>
		<el-tree class="tree-row" :data="selectedTreeData"  :props="{children: 'children', label: 'itemCategoryName'}"  node-key="id" default-expand-all   :expand-on-click-node="false">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span>{{ node.label }}</span>
				<span>
				<el-button
					type="text"
					size="mini"
					@click="() => remove(node, data)">
					Delete
				</el-button>
				</span>
			</span>
		</el-tree>
	</div>
</template>
<script>
export default {
	data() {
		return {
			list: [
				{
					"id": "4100000000000071",
					"itemCategoryCode": "001",
					"itemCategoryName": "白酒类",
					children: [{
						"id": "41000020000000071",
						"itemCategoryCode": "0012",
						"itemCategoryName": "白酒类2",
						children: [{
							"id": "41000040000000071",
							"itemCategoryCode": "0014",
							"itemCategoryName": "白酒类4",
						},
						{
							"id": "41000050000000071",
							"itemCategoryCode": "0015",
							"itemCategoryName": "白酒类5",
						},
						{
							"id": "41000060000000071",
							"itemCategoryCode": "0016",
							"itemCategoryName": "白酒类6",
						}]
					},
					{
						"id": "41000030000000071",
						"itemCategoryCode": "0013",
						"itemCategoryName": "白酒类3",
					}]
				},
			],
			// selectedIds: ['41000040000000071', "41000060000000071"],
			selectedTreeData:[]
		}
	},
	created() {
	},
	methods: {
		getChecked() {
			this.selectedIds = this.$refs.tree.getCheckedKeys(true);
            this.extractSubtrees();
		},
		extractSubtrees() {
			const subtrees = [];
			for (const id of this.selectedIds) {
				const subtree = this.extractSubtree(this.list, id);
				if (subtree) {
					subtrees.push(subtree);
				}
			}
			this.selectedTreeData = this.mergeSubtrees(subtrees);
		},
		extractSubtree(treeData, targetId) {
			for (const node of treeData) {
				if (node.id === targetId) {
					// return this.cloneAndFilterChildren(node); 可以用这个也可以用下边的方式
					return { ...node };
				}
				if (node.children) {
					const subtree = this.extractSubtree(node.children, targetId);
					if (subtree) {
						// return this.cloneAndFilterChildren({ ...node, children: [subtree] });可以用这个也可以用下边的方式
						return { ...node, children: [subtree] };
					}
				}
			}
			return null;
		},
		cloneAndFilterChildren(node) {
			if (!node.children || node.children.length === 0) {
				return { ...node, children: [] };
			}
			const filteredChildren = node.children
				.map(child => this.cloneAndFilterChildren(child))
				.filter(child => this.selectedIds.includes(child.id) || child.children.length > 0);
			return { ...node, children: filteredChildren };
		},
		mergeSubtrees(subtrees) {
			this.mergedTree = [];
			const idMap = {};

			for (const subtree of subtrees) {
				this.addSubtreeToMergedTree(this.mergedTree, subtree, idMap);
			}

			return this.mergedTree;
		},
		addSubtreeToMergedTree(mergedTree, subtree, idMap) {
			if (!subtree) return;

			const node = { ...subtree, children: [] };

			if (!idMap[node.id]) {
				idMap[node.id] = node;
				mergedTree.push(node);
			} else {
				// Object.assign(idMap[node.id], node);
			}

			if (subtree.children) {
				for (const child of subtree.children) {
					this.addSubtreeToMergedTree(mergedTree[mergedTree.length-1].children, child, idMap);
				}
			}
		},
		remove(node, data) {
			let keys = [];
			this.getRemovedIds(data,keys);
			keys.map(item => {
				this.selectedIds.splice(this.selectedIds.indexOf(item), 1);
			})
			this.$refs.tree.setCheckedKeys(this.selectedIds);
		},
		getRemovedIds(data,keys) {
			if (data.children && data.children.length > 0) {
				data.children.map(item => {
					this.getRemovedIds(item,keys);
				})
			} else {
				keys.push(data.id);
			}
		},
	}
}

</script>
<style lang="less" scoped>
.flex {
	display: flex;
	justify-content: space-evenly;
}
.tree-row{
	min-width: 200px;
}
.custom-tree-node{
	display: flex;
	flex:1;
	justify-content: space-around;
}
</style>