如何获取Quasar q-tree中的“半勾选”节点？

半勾选状态触发于父节点的部分子节点被勾选的场景，Q-Tree组件本身不会直接维护半勾选节点的集合，需要通过已勾选节点数组（ticked）结合树结构数据自行计算，具体实现方式如下：

核心判断逻辑 #

一个节点处于半勾选状态需同时满足三个条件：

• 节点自身未被勾选（不在ticked数组内）
• 节点存在子节点
• 子节点中至少一个被勾选，且并非所有子节点都被勾选

递归检测实现 #

编写递归函数遍历整个树结构，逐个节点验证上述条件，提取半勾选节点：

// 参数说明：treeData为树结构数据源，ticked为Q-Tree绑定的已勾选节点数组
function getHalfTickedNodes(treeData, ticked) {
  const halfTickedNodes = [];

  function checkNode(node) {
    // 仅处理带子节点的节点
    if (node.children && node.children.length > 0) {
      let checkedChildCount = 0;
      // 递归检查子节点并统计已勾选数量
      node.children.forEach(child => {
        checkNode(child);
        if (ticked.includes(child.id)) checkedChildCount++;
      });

      // 验证半勾选条件
      const isHalfTicked = !ticked.includes(node.id) 
        && checkedChildCount > 0 
        && checkedChildCount < node.children.length;
      
      if (isHalfTicked) halfTickedNodes.push(node);
    }
  }

  treeData.forEach(node => checkNode(node));
  return halfTickedNodes;
}

使用方式 #

假设你的Q-Tree配置如下：

<q-tree
  :nodes="treeData"
  v-model:ticked="tickedNodes"
  tick-strategy="leaf"
/>

直接调用函数即可获取半勾选节点：

const halfTicked = getHalfTickedNodes(treeData, tickedNodes);

注意事项 #

• 确保每个节点有唯一标识字段（示例中用id），且与ticked数组中的值对应；若使用其他字段（如key），需同步修改代码中的child.id为对应字段名。
• 递归函数会自动处理多层嵌套的树结构，无需额外适配层级。

内容的提问来源于stack exchange，提问作者Tax Raoul