從樹形數據末節點回溯根節點并拼接標簽
處理樹形數據時，常需根據末節點信息回溯至根節點并拼接節點標簽。例如，給定末節點值“1-2”，需返回從該節點到根節點的路徑標簽，例如“節點1/節點1-2”。
以下示例數據展示了樹形結構：
const treeData = [{ label: "節點1", value: "1", children: [{ label: "節點1-1", value: "1-1", }, { label: "節點1-2", value: "1-2", }] }, { label: "節點2", value: "2", children: [{ label: "節點2-1", value: "2-1", }] }];
直接從葉子節點回溯根節點存在挑戰，因為樹結構是單向的。但我們可以利用樹組件（如tdesign或element-ui）提供的節點對象，該對象包含父節點信息。
當用戶選擇值為“1-2”的節點時，樹組件提供該節點對象。我們可以通過迭代父節點信息向上遍歷，直到到達根節點。在此過程中，收集每個節點的label值，并按從末節點到根節點的順序拼接，最終得到路徑字符串“節點1/節點1-2”。
這種方法有效解決了從樹形數據末節點回溯至根節點并拼接標簽的問題。 代碼實現需要依賴具體的樹組件API，這里提供一個算法思路：
function getPathLabel(treeData, targetValue) { function traverse(node) { if (node.value === targetValue) { return [node.label]; } if (node.children) { for (let child of node.children) { let path = traverse(child); if (path) { return [node.label, ...path]; } } } return null; } for (let node of treeData) { let path = traverse(node); if (path) { return path.join("/"); } } return null; // Target value not found } let pathLabel = getPathLabel(treeData, "1-2"); console.log(pathLabel); // Output: 節點1/節點1-2 pathLabel = getPathLabel(treeData, "2-1"); console.log(pathLabel); // Output: 節點2/節點2-1 pathLabel = getPathLabel(treeData, "3-1"); //value不存在 console.log(pathLabel); // Output: null
這段代碼實現了遞歸遍歷，找到目標節點后，向上回溯拼接標簽。 實際應用中，需要根據所使用的樹組件API修改代碼，以獲取節點的父節點信息。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
