2017-12-17 4 views
10

Element.ui treeコンポーネントを使用してVue(クラウドディスクのようなもの)にSPAを作成し、フォルダツリーを表示します。問題は、ツリー自体がすべてを一度にロードするのではなく、遅延修飾子の助けを借りて順次ロードされることです。Vue Element.uiツリー、reitイベントを発行

サーバ部分はmongoose + mongoose-path-treeです。各ノードは、その子を知りませんが、子どもたちはルート要素への完全なパスを格納します:マングースパスツリーの使用は、データベース内のツリー記憶方式は次であることを、意味

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

問題は、ユーザーがツリーに変更を加え(ファイルをロードし、新しいフォルダを作成するなど)、サーバーがそれらを受け入れると、新しいデータを読み込む必要があることをツリーに通知する方法です。ドキュメントの要素uiには、ツリーの再描画を引き起こすイベントをキャプチャする方法は記載されていません。

クライアントツリーのテンプレート新しいノードに

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) 
} 

答えて

1

私のソリューションは、ツリービューには、V-かの属性を追加し、その後方法

を作成することにより、単にツリービュー再度レンダリングしたロード

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

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

リロード機能を呼び出すと、ツリービューが正しくリロードされます

0

計算された変数をツリーコンポーネントのpropとして渡してみます。計算のすべての変更がツリーの再レンダリングをトリガーします。

+0

しかし、私は遅延ロードを使用しているので、計算された小道具を使用することはできません。 Ecsual、element-uiツリーで遅延ロードを使用すると、ツリーコンポーネントからデータを取得できない – ZulusK

関連する問題