element-ui、antd-Vue,树组件全选半选回显分别显示,关联状态处理

判断回显的父节点下的叶子节点是否全部选中,全部选中就是全选,保留;没有全选就是半选,不保留。保留与不保留说的是回显的数组数据。

// 处理tree关联全选半选 export function processTreeData(treeData, selectedIds) { const fullySelected = []; // 叶子节点全部被选中的父节点 const partiallySelected = []; // 叶子节点部分被选中的父节点 /** * 递归遍历树节点 * @param {Object} node - 当前节点 * @returns {boolean} - 返回当前节点的叶子节点是否全部被选中 */ function traverse(node) { if (!node.children || node.children.length === 0) { // 叶子节点:直接判断是否被选中 const isHas = selectedIds.map(q => String(q)).includes(node.id); if (isHas) fullySelected.push(node.id) return isHas } // 父节点:递归检查子节点 let allChildrenSelected = true; let someChildrenSelected = false; for (const child of node.children) { const childSelected = traverse(child); if (childSelected) someChildrenSelected = true; if (!childSelected) allChildrenSelected = false; } // 分类父节点 if (allChildrenSelected) { fullySelected.push(node.id); } else if (someChildrenSelected) { partiallySelected.push(node.id); } return allChildrenSelected; } // 遍历树数据 for (const node of treeData) { traverse(node); } return { fullySelected, partiallySelected, }; }

  

posted @ 2025-02-11 11:43  玛卡巴鉲  阅读(85)  评论(0)    收藏  举报