html - 单击按钮时打开 v-select 选项

Question

我正在寻找一种在单击图标按钮时打开 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>

Answer 1

这是一个解决方案：创建一个变量（在此示例中命名toggleSelect） ，它将控制 the<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/>