Vue中如何获取多个Vuetify Treeview组件的选中节点数据

问题原因 #

你遇到的冲突是因为两个Treeview共用了同一个selected绑定变量，后渲染的组件会覆盖前者的绑定值，和点击顺序无关。

实现方案 #

1. 声明独立的选中状态变量 #

给左右两个Treeview分别分配独立的选中存储变量，示例如下：

// Vue2 data 或 Vue3 reactive 定义
data() {
  return {
    leftTreeItems: [], // 左侧树节点数据
    rightTreeItems: [], // 右侧树节点数据
    leftSelected: [], // 左侧树选中节点集合
    rightSelected: [] // 右侧树选中节点集合
  }
}

2. 模板中分别绑定对应属性 #

给两个Treeview绑定各自的选中变量，也可以绑定选中事件做实时处理：

<template>
  <div style="display: flex; gap: 20px;">
    <!-- 左侧Treeview -->
    <v-treeview
      :items="leftTreeItems"
      v-model:selected="leftSelected"
      selectable
      max-select="1"
      @update:selected="onLeftSelect"
    />

    <!-- 中间展示区域 -->
    <div>
      <p>左侧选中：*{{ leftSelected[0]?.name || '无' }}*</p>
      <p>右侧选中：*{{ rightSelected[0]?.name || '无' }}*</p>
    </div>

    <!-- 右侧Treeview -->
    <v-treeview
      :items="rightTreeItems"
      v-model:selected="rightSelected"
      selectable
      max-select="1"
      @update:selected="onRightSelect"
    />
  </div>

如果你使用的是Vuetify2，将v-model:selected替换为v-model，选中事件替换为@input即可，逻辑完全一致。

3. 选中事件处理（可选） #

如果需要在选中节点时触发额外逻辑，在对应事件回调中处理即可：

methods: {
  onLeftSelect(selectedList) {
    // 处理左侧选中逻辑，selectedList为当前左侧选中的所有节点数组
    console.log('左侧选中节点名称：', selectedList.map(item => item.name))
  },
  onRightSelect(selectedList) {
    // 处理右侧选中逻辑
    console.log('右侧选中节点名称：', selectedList.map(item => item.name))
  }
}

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