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

 需求如下：

1.点击父级节点 将父级节点下children中所有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; //详情页 关联门店IDlet 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});},
}