[VUE] elementUI ツリー コンポーネントを使用して、選択した ID に従って自動的にエコーします

 要件は次のとおりです。

1. 親ノードをクリックして、親ノードの下の子のすべての ID を配列に入れます

2. 親の下にある子ノードをクリックし、クリックした子ノードを配列に入れます

3. 親ノードの選択を解除し、配列に入れられたすべての子ノード ID を削除します。

4. 選択した子ノード配列に従って、それが属する親ノードと一致します。

								<el-tree
									:data="treeDefaultData"
									:props="defaultProps"
									show-checkbox
									@check-change="handleCheckChange"
								>
								</el-tree>
	data() {
		return {
			defaultProps: {
				children: 'children',
				label: 'label',
			},
			treeDefaultData: [],
}
}
	methods: {
//点击将选择到子节点id传入数组
		handleCheckChange(data, checked, indeterminate) {
			console.log(
				'该节点所对应的对象:',
				data,
				'是否被选中:',
				checked,
				'节点的子树中是否有被选中的节点:',
				indeterminate
			);

			if (checked) {
				if (data.children) {
					for (let i in data.children) {
						const item = data.children[i];
						this.dataScopeList.push(item.id);
					}
				} else {
					this.dataScopeList.push(data.id);
				}
				this.dataScopeList = Array.from(new Set(this.dataScopeList));
			} else {
				if (data.children) {
					return;
				} else {
					this.dataScopeList = this.dataScopeList.filter(function (e) {
						return e !== data.id;
					});
				}
			}
			this.form.dataScopeList = this.dataScopeList;
			console.log(this.dataScopeList, 'dataScopeList');
		},
		// 将数组里的id 自动查找父级id，将所属的子项放入children 并组成新的数组对象
		calickDetails(row) {
			getDetails(row.userId).then((response) => {
				console.log(response.data);
				this.detailsData = response.data;
				this.detailsTreeShow = true;

				let detailsID = this.detailsData.dataScopeList;

				let result = this.treeDefaultData
					.filter((item) => {
						return (
							detailsID.includes(item.id) ||
							item.children.some((child) => detailsID.includes(child.id))
						);
					})
					.map((item) => {
						return {
							...item,
							children: item.children.filter((child) =>
								detailsID.includes(child.id)
							),
						};
					});

				this.detailsTreeData = result; 
			});
		},
}


	handleCheckChange(data, checked, indeterminate) {
			if (checked) {
				if (data.children) {
					this.menuIds.push(data.id);
					for (let i in data.children) {
						const item = data.children[i];
						this.menuIds.push(item.id);
						if (data.children[i].children) {
							for (let j in data.children[i].children) {
								const itemChildren = data.children[i].children[j];
								this.menuIds.push(itemChildren.id);
							}
						}
					}
				} else {
					this.menuIds.push(data.id);
				}
				this.menuIds = Array.from(new Set(this.menuIds));
			} else {
				// 取消勾选子节点
				if (indeterminate) {
					return;
				} else {
					if (data.id) {
						this.menuIds = this.menuIds.filter(function (e) {
							return e !== data.id;
						});
						if (data.children) {
							for (let i in data.children) {
								const item = data.children[i];
								this.menuIds = this.menuIds.filter(function (e) {
									return e !== item.id;
								});

								if (data.children[i].children) {
									for (let j in data.children[i].children) {
										const itemChildren = data.children[i].children[j];
										this.menuIds = this.menuIds.filter(function (e) {
											return e !== itemChildren.id;
										});
									}
								}
							}
						}
					}
				}
			}
		},