✅ 更新角色管理页面

Author: SakuraMuxia

docs/front-end/13-project/04-角色管理页面.md

@@ -34,3 +34,30 @@ const labelOptions = ref({
 
 ```
 
+## 遍历获取需要属性
+
+```ts
+// 处理数据-获取根节点数据
+const filterMenuData = (original: any[]) => {
+    return original
+        .filter((item: any) => !item.pid) // 筛选 pid 为空的根节点
+        .map((item: any) => ({
+            id: item.id,
+            name: item.name,
+            pid: item.pid,
+        })); // 返回只包含 id、name、pid 的对象数组
+};
+
+// 示例数据
+const originalData = [
+    { id: 1, name: "根节点1", pid: null },
+    { id: 2, name: "子节点1", pid: 1 },
+    { id: 3, name: "根节点2", pid: null },
+    { id: 4, name: "子节点2", pid: 3 },
+];
+
+// 调用函数
+const rootNodes = filterMenuData(originalData);
+console.log(rootNodes);
+```
+