[VUE] Use the elementUI tree component to automatically echo according to the selected id

 The requirements are as follows:

1. Click on the parent node to put all the ids in the children under the parent node into the array

2. Click the child node under the parent and put the clicked child node into the array

3. Deselect the parent node and delete all the child node ids put into the array

4. According to the selected child node array, match the parent node to which it belongs

								<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;
										});
									}
								}
							}
						}
					}
				}
			}
		},

Guess you like

Origin blog.csdn.net/liusuihong919520/article/details/131870675