In the tree structure, the parent node information is obtained according to the Id

Problem 1: Drag and drop sorting

Background: I made such a request a few days ago – the category (el-tree selected by the component) supports drag-and-drop sorting.

In fact, the el-tree can implement drag-and-drop, just add a draggabletree shape, and after the drag and drop is completed Just update the data in full.

However, the performance overhead of fully updating data is relatively large (the main overhead lies in the backend), so the technical solution at that time was as follows:

• If you move to an empty directory,preCategoryId = null && nextCategoryId = null
• If you move to a non-empty directory to the top,preCategoryId = null
• If you move to a non-empty directory to the bottom,nextCategoryId = null
• Otherwise, pass the correspondingpreCategoryId，nextCategoryId

In this process, the difficulty is to obtain preCategoryId、nextCategoryId, that is, to obtain the data of the parent node:

Get parameter implementation:

 // 获取参数
 // 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!;
  };

Question 2: Expand the category

One requirement is: after loading the page, expand the category of the currently selected intent, effect:

el-treeproperties provided by the component: :default-expanded-keys="expandedKeys", The keyid to the realization is to query all his grandparent elements according to the current category id(expandedKeys), and bind to the properties 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;
}