ツリー構造では、親ノード情報はIDに従って取得されます。

問題1：ドラッグアンドドロップソート

背景：数日前にこのようなリクエストを行いました–カテゴリ（コンポーネントによって選択されたel-tree）はドラッグアンドドロップの並べ替えをサポートしています。

実際、el-treeはすでにドラッグアンドドロップを実装でき、draggableツリーを追加するだけです。形状、およびドラッグアンドドロップが完了した後データを完全に更新するだけです。

ただし、データを完全に更新することによるパフォーマンスのオーバーヘッドは比較的大きいため（主なオーバーヘッドはバックエンドにあります）、当時の技術的な解決策は次のとおりでした。

• 空のディレクトリに移動した場合、preCategoryId = null && nextCategoryId = null
• 空でないディレクトリを一番上に移動すると、preCategoryId = null
• 空でないディレクトリの一番下に移動すると、nextCategoryId = null
• それ以外の場合は、対応するpreCategoryId，nextCategoryId

このプロセスでは、取得することpreCategoryId、nextCategoryId、つまり親ノードのデータを取得することが困難です。

パラメータの実装を取得します。

 // 获取参数
 // data:父节点数据
 // draggingNode 当前拖拽节点
  const getParams = (data: TreeItem, draggingNode: {
     
      data: {
     
      categoryId: string } }) => {
    
    
    let preCategoryId: string | undefined = "";
    let nextCategoryId: string | undefined = "";
    let parentCategoryId: string | undefined = "";

    parentCategoryId = data.categoryId;
    const index = data.children!.findIndex((i) => i.categoryId === draggingNode.data.categoryId);
    if (data.children!.length === 1) {
    
    
      // 如果移动到一个空的目录，preCategoryId = null && nextCategoryId = null 都为空
      preCategoryId = undefined;
      nextCategoryId = undefined;
    } else if (!index) {
    
    
      // 如果移动到一个非空目录到最上方，preCategoryId = null
      preCategoryId = undefined;
      nextCategoryId = data.children![index + 1].categoryId;
    } else if (index === data.children!.length - 1) {
    
    
      // 如果移动到一个非空目录到最下饭，nextCategoryId = null
      preCategoryId = data.children![index - 1].categoryId;
      nextCategoryId = undefined;
    } else {
    
    
      preCategoryId = data.children![index - 1].categoryId;
      nextCategoryId = data.children![index + 1].categoryId;
    }
    return {
    
    
      preCategoryId,
      nextCategoryId,
      parentCategoryId,
    };
  };

  // 根据id获取父节点数据
  const getparentDataById = (id: string, tree: Array<TreeItem>): TreeItem => {
    
    
    let res = null;
    for (let i = 0; i < tree.length; i++) {
    
    
      let ele = tree[i];
      ele.categoryId === id ? (res = ele) : "";
      if (res) break;
      if (ele.children!.length) {
    
    
        res = getparentDataById(id, ele.children!);
      }
    }
    return res!;
  };

質問2：カテゴリを展開する

1つの要件は次のとおりです。ページを読み込んだ後、現在選択されているインテントのカテゴリを展開します。効果：

el-treeコンポーネントによって提供されるプロパティ： :default-expanded-keys="expandedKeys"、実現の鍵は、現在のカテゴリに従ってidすべての祖父母の要素をクエリid(expandedKeys)し、プロパティにバインドすることです。default-expanded-keys。。

// eltree根据id获取所有父节点的id,
function getParentIds(treeData: Array<TreeItem>, id: string) {
    
    
  let str = "";
  const joinStr = ",";

  for (var i = 0, len = treeData.length; i < len; i++) {
    
    
    var item = treeData[i];
    if (item.categoryId === id) {
    
    
      return item.categoryId;
    }
    if (item.children) {
    
    
      str = item.categoryId + joinStr + getParentIds(item.children, id);
      if (str === item.categoryId + joinStr) {
    
    
        str = "";
      } else {
    
    
        return str;
      }
    }
  }
  return str;
}