【VUE】使用elementUI tree组件根据所选id自动回显-Toy模板网

这篇具有很好参考价值的文章主要介绍了【VUE】使用elementUI tree组件根据所选id自动回显。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求如下：

1.点击父级节点将父级节点下children中所有id放入数组

2.点击父级下的子节点将点击的子节点放入数组

3.取消选择父节点，将放入数组的所有子节点id删除

4.根据选择的子节点数组，匹配他所属的父节点文章来源地址https://www.toymoban.com/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: {
//点击将选择到子节点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;
										});
									}
								}
							}
						}
					}
				}
			}
		},

到了这里，关于【VUE】使用elementUI tree组件根据所选id自动回显的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！