?需求如下：

1.點(diǎn)擊父級(jí)節(jié)點(diǎn)?將父級(jí)節(jié)點(diǎn)下children中所有id放入數(shù)組

2.點(diǎn)擊父級(jí)下的子節(jié)點(diǎn)?將點(diǎn)擊的子節(jié)點(diǎn)放入數(shù)組

3.取消選擇父節(jié)點(diǎn)，將放入數(shù)組的所有子節(jié)點(diǎn)id刪除

4.根據(jù)選擇的子節(jié)點(diǎn)數(shù)組，匹配他所屬的父節(jié)點(diǎn)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-610738.html

								<el-tree
									:data="treeDefaultData"
									:props="defaultProps"
									show-checkbox
									@check-change="handleCheckChange"
								>
								</el-tree>
	data() {
		return {
			defaultProps: {
				children: 'children',
				label: 'label',
			},
			treeDefaultData: [],
}
}
	methods: {
//點(diǎn)擊將選擇到子節(jié)點(diǎn)id傳入數(shù)組
		handleCheckChange(data, checked, indeterminate) {
			console.log(
				'該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象:',
				data,
				'是否被選中:',
				checked,
				'節(jié)點(diǎn)的子樹中是否有被選中的節(jié)點(diǎn):',
				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');
		},
		// 將數(shù)組里的id 自動(dòng)查找父級(jí)id，將所屬的子項(xiàng)放入children 并組成新的數(shù)組對(duì)象
		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 {
				// 取消勾選子節(jié)點(diǎn)
				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;
										});
									}
								}
							}
						}
					}
				}
			}
		},

到了這里，關(guān)于【VUE】使用elementUI tree組件根據(jù)所選id自動(dòng)回顯的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！