v-list: разрешить одиночный выбор в двухуровневом списке - PullRequest
Новая
       3

v-list: разрешить одиночный выбор в двухуровневом списке

0 голосов
/ 08 мая 2020

Можно ли заставить v-list вести себя как стандартный элемент управления TreeView, чтобы были элементы и подэлементы, но одновременно можно было выбрать не более одного элемента или подэлемента?

Вот двухуровневый расширяемый список. Верхний уровень показывает компании, а вложенный уровень показывает людей в каждой компании. Вот скриншот:

enter image description here

Вот примерный скелет того, как я использую v-list-group, v-list-item-group и v-list-item для достижения этой цели. : 

<v-list>
  <template v-for="(company, index) in companies">
    <v-list-group
      :key="'C-' + company.id"
      :value="true"
      >
      <template v-slot:activator>
        ...
      </template>

      <v-list-item-group sub-group>
        <v-list-item
          v-for="member in company.members"
          :key="'M-' + company.id + '.' + member.id"
        >
          <template v-slot:default>
            ...
          </template>
        </v-list-item>
      </v-list-item-group>
    </v-list-group>
  </template>
</v-list>

Проблема в том, что мы должны позволять пользователю выбирать только одну компанию или человека за раз, но v-list отслеживает активный элемент в каждой группе отдельно. Таким образом, нажатие на разных людей выберет всех из них, например:

enter image description here

Есть ли способ избежать этого и просто разрешить только один (1-й или 2-го уровня) узел за раз?

...