如何通过v-treeview API实现仅展开/收起一级节点？

可以实现这个需求，不需要使用updateAll方法（它会控制所有层级节点的展开状态），而是通过手动控制open数组来精准控制一级节点的展开/收起，具体方案如下：

步骤1：调整v-treeview组件属性 #

将原来的:open-all="expanded"替换为:open="openNodes"，改为手动指定需要展开的节点集合：

<v-treeview 
  :value="x"
  @input="y"
  :items="[tree]"
  :open="openNodes" 
  ref="myTreeview"
></v-treeview>

步骤2：初始化数据 #

在组件的data中定义openNodes数组，用来存储当前处于展开状态的节点标识（确保你的节点数据包含唯一标识字段，比如id；如果使用其他字段作为标识，可通过item-key属性指定）：

data() {
  return {
    openNodes: [],
    // 示例节点结构，需根据你的实际数据调整
    tree: {
      id: 0,
      name: 'Level 0',
      children: [
        {
          id: 1,
          name: 'Level 1',
          children: [
            { id: 11, name: 'Level 2' },
            { id: 12, name: 'Level 2' }
          ]
        },
        {
          id: 2,
          name: 'Level 1'
        }
      ]
    }
  }
}

步骤3：修改toggleTreeview方法 #

通过判断一级节点的当前展开状态，动态更新openNodes数组，仅切换一级节点的展开/收起状态，保留二级节点的原有状态：

toggleTreeview() {
  // 获取Level 0下的所有一级节点（Level 1）
  const level1Nodes = this.tree.children || [];
  const level1Ids = level1Nodes.map(node => node.id);
  
  // 检查是否所有一级节点都已展开
  const allLevel1Expanded = level1Ids.every(id => this.openNodes.includes(id));
  
  if (allLevel1Expanded) {
    // 收起操作：从展开集合中移除所有一级节点的标识
    this.openNodes = this.openNodes.filter(id => !level1Ids.includes(id));
  } else {
    // 展开操作：添加所有一级节点的标识，同时保留已展开的二级节点
    this.openNodes = [...new Set([...this.openNodes, ...level1Ids])];
  }
}

补充说明 #

• 该方案只会改变一级节点的展开状态，二级节点（如Level 2）的展开/收起状态将完全保留，符合你的需求。
• 如果你的节点不用id作为唯一标识，只需在v-treeview上添加item-key="你的标识字段名"，并同步修改代码中获取节点标识的逻辑即可。

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