Vue Element.ui tree, reload 이벤트 새로 고침

Question

Element.ui tree 구성 요소를 사용하여 Vue (구름 디스크와 비슷한)에서 SPA를 생성하여 폴더 트리를 표시합니다. 문제는 트리 자체가 모든 것을로드하지는 않지만 지연 수정자를 사용하여 순차적으로로드된다는 것입니다.

서버 부분은 몽구스 + 몽구스 경로 트리입니다. 각 노드가 아이에 대해 알고하지 않지만, 아이들은 루트 요소에 자신의 전체 경로를 저장 : 몽구스 경로 트리의 사용은 데이터베이스에있는 나무의 저장 방식이 옆에 있음을 의미

#root_id #subroot_id # ... #parent_id #this_id 

문제는 사용자가 트리를 변경 (파일을로드하고 새 폴더를 만드는 등)하고 서버가이를 수락하면 트리에 새 데이터를로드해야 함을 알리는 방법입니다. 문서의 요소 ui는 트리를 다시 그리기 위해 이벤트를 캡처하는 방법을 설명하지 않습니다.

클라이언트 트리 템플릿

<el-tree 
:props="defaultProps" 
:load="loadNode" 
@node-click="handleNodeClick" 
:expand-on-click-node="false" 
lazy 
node-key="id" 
ref="tree" 
/> 

로드 새로운 노드

loadNode: async function (node, resolve) { 
try { 
    let firstGeneration = await foldersAPI.get(this.$store.state.user.myDrive); 
    if (node.level === 0) { 
    return resolve(firstGeneration.data.folder.children); 
    } else { 
    var data; 
    if (node.data.hasChildren) { 
     let children = await foldersAPI.get(node.data._id); 
     console.log(children); 
     data = children.data.folder.children; 
    } else { 
     data = []; 
    } 
    resolve(data); 
    } 
} catch (e) { 
    console.log(e) 
} 

Answer 1

내 솔루션 추가하여 단순히 트 리뷰 다시 쓰게했다 V-경우 속성 트리보기에 다음 방법

를 생성

reload() { 
    this.show = false; 
    this.$nextTick(() => { 
     this.show = true 
    }) 
} 

해당 reload 함수를 호출하면 올바르게 트리 뷰가 다시로드됩니다.

Answer 2

계산 된 변수를 트리 구성 요소의 소품으로 전달합니다. 계산 된 모든 변경 사항은 트리의 다시 렌더링을 트리거합니다.