Открыть параметры v-select при нажатии кнопки

Я ищу способ открыть компонент vuetify v-select при нажатии на кнопку со значком. V-select не должен быть виден, когда он закрыт, только когда он открыт нажатием на кнопку. Это похоже на то, что кнопка переключает состояние v-select

Цель состоит в том, чтобы фильтровать столбцы для отображения в таблице данных. И причина, по которой я хочу, чтобы он был скрыт по умолчанию, заключается в том, что у меня уже есть компонент v-select на панели инструментов таблицы, чтобы выбрать данные для отображения.

У меня есть только это мой соответствующий код, я не знаю, как продолжить отсюда

 <v-btn small icon>
      <v-icon>
        mdi-pencil
          <v-select :items="headers"></v-select>
      </v-icon>
 </v-btn>

html vue.js vuetify.js v-select
person ATT    schedule 13.09.2020    source источник
comment
Я даже не уверен, можно ли вложить один интерактивный элемент в другой.   -  person Terry    schedule 13.09.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вот решение: создайте переменную (которая в этом примере называется toggleSelect), которая будет управлять видимостью <v-select/> и его <v-menu/> (параметры раскрывающегося списка). <v-select/> имеет menu-props, который мы можем использовать для управления видимостью меню. Для поля выбора мы можем просто использовать v-if, чтобы скрыть его.

<v-btn 
  ...
  @click="toggleSelect = !toggleSelect"
>
  <v-icon>mdi-pencil</v-icon>
</v-btn>
<v-select
  :items="headers"
  v-if="toggleSelect"
  :menu-props="{value: toggleSelect}"
/>

data: () => ({
  headers: [...],
  toggleSelect: false,  // let's not show the <v-select/> at first load.
})

Вот пример демонстрации с <v-data-table/> реализация.

person Blackraspberryyy    schedule 13.09.2020
comment
Хорошее решение. У него есть небольшой недостаток, заключающийся в том, что сам v-select будет отображаться до того, как меню перекрывает его. Можно ли использовать слот v-select, чтобы отобразить его как значок в нормальном состоянии? Я пытался, но у меня ничего не получалось. - person some-user; 03.12.2020