10

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

サーバー部分はmongoose + mongoose-path-treeです。mongoose-path-tree の使用は、データベース内のツリー ストレージ スキームが次にあることを意味します。各ノードはその子について認識しませんが、子はルート要素へのフル パスを格納します。

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

3 に答える 3