【VUE】使用elementUI tree组件根据所选id自动回显

 需求如下：

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

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

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

4.根据选择的子节点数组，匹配他所属的父节点

								
								
	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; //详情页 关联门店ID

				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; //关联门店id所属超市及children
			});
		},
}