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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<code-pre class="code-pre" id="pre-fFCfkM"><code-line class="line-numbers-rows"></code-line>判断回显的父节点下的叶子节点是否全部选中，全部选中就是全选，保留；没有全选就是半选，不保留。保留与不保留说的是回显的数组数据。<br><br>// 处理tree关联全选半选 <code-line class="line-numbers-rows"></code-line>export function processTreeData(treeData, selectedIds) { <code-line class="line-numbers-rows"></code-line>  const fullySelected = []; // 叶子节点全部被选中的父节点 <code-line class="line-numbers-rows"></code-line>  const partiallySelected = []; // 叶子节点部分被选中的父节点 <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>  /** <code-line class="line-numbers-rows"></code-line>   * 递归遍历树节点 <code-line class="line-numbers-rows"></code-line>   * @param {Object} node - 当前节点 <code-line class="line-numbers-rows"></code-line>   * @returns {boolean} - 返回当前节点的叶子节点是否全部被选中 <code-line class="line-numbers-rows"></code-line>   */ <code-line class="line-numbers-rows"></code-line>  function traverse(node) { <code-line class="line-numbers-rows"></code-line>    if (!node.children || node.children.length === 0) { <code-line class="line-numbers-rows"></code-line>      // 叶子节点：直接判断是否被选中 <code-line class="line-numbers-rows"></code-line>      const isHas = selectedIds.map(q => String(q)).includes(node.id); <code-line class="line-numbers-rows"></code-line>      if (isHas) fullySelected.push(node.id) <code-line class="line-numbers-rows"></code-line>      return isHas <code-line class="line-numbers-rows"></code-line>    } <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>    // 父节点：递归检查子节点 <code-line class="line-numbers-rows"></code-line>    let allChildrenSelected = true; <code-line class="line-numbers-rows"></code-line>    let someChildrenSelected = false; <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>    for (const child of node.children) { <code-line class="line-numbers-rows"></code-line>      const childSelected = traverse(child); <code-line class="line-numbers-rows"></code-line>      if (childSelected) someChildrenSelected = true; <code-line class="line-numbers-rows"></code-line>      if (!childSelected) allChildrenSelected = false; <code-line class="line-numbers-rows"></code-line>    } <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>    // 分类父节点 <code-line class="line-numbers-rows"></code-line>    if (allChildrenSelected) { <code-line class="line-numbers-rows"></code-line>      fullySelected.push(node.id); <code-line class="line-numbers-rows"></code-line>    } else if (someChildrenSelected) { <code-line class="line-numbers-rows"></code-line>      partiallySelected.push(node.id); <code-line class="line-numbers-rows"></code-line>    } <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>    return allChildrenSelected; <code-line class="line-numbers-rows"></code-line>  } <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>  // 遍历树数据 <code-line class="line-numbers-rows"></code-line>  for (const node of treeData) { <code-line class="line-numbers-rows"></code-line>    traverse(node); <code-line class="line-numbers-rows"></code-line>  } <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>  return { <code-line class="line-numbers-rows"></code-line>    fullySelected, <code-line class="line-numbers-rows"></code-line>    partiallySelected, <code-line class="line-numbers-rows"></code-line>  }; <code-line class="line-numbers-rows"></code-line>} </code-pre>

　　

__EOF__

本文作者：沧澜野兽迈特丶凯
本文链接：https://www.cnblogs.com/sxdjy/p/18709469.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！