Vuetify中v-data-table表头插槽嵌入v-menu遇交互异常问题

问题核心 #

在v-data-table表头插槽内嵌的v-menu中使用v-autocomplete时，点击Autocomplete展开选项会触发菜单关闭，即使设置了:close-on-click="false"和:close-on-content-click="false"也无法解决——这是因为Autocomplete的下拉选项点击事件会被v-menu的全局点击监听器捕获，触发关闭逻辑。

可行解决方案 #

通过组合属性配置和事件阻止冒泡来修复：

修改后的代码示例 #

<v-data-table :items="desserts" :headers="headers">
  <template #[`header.calories`]>
    <v-menu 
      top 
      persistent 
      :close-on-click="false" 
      :close-on-content-click="false"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn icon v-bind="attrs" v-on="on">
          <v-icon>filter</v-icon>
        </v-btn>
      </template>
      <v-autocomplete 
        class="black" 
        :items="headers"
        @click.stop
        @mousedown.stop
      />
    </v-menu>
  </template>
</v-data-table>

关键说明 #

• persistent：强制菜单保持打开状态，仅在主动点击激活器或调用关闭方法时才会关闭
• @click.stop、@mousedown.stop：阻止Autocomplete内部的点击/鼠标按下事件向上冒泡到v-menu，避免触发菜单的关闭检测
• 若仍有问题，可尝试给v-menu添加attach="body"属性，让菜单内容挂载到body节点，确保Autocomplete的下拉选项被纳入菜单的点击检测范围

内容的提问来源于stack exchange，提问作者d-_-b