如何在滚动列表中将Vuetify v-menu绑定到父元素并随滚动固定？

针对你遇到的v-menu默认挂载到v-app导致DOM结构杂乱、滚动时菜单与激活按钮脱节的问题，Vuetify其实已经提供了现成的解决方案——利用attach属性就能轻松搞定，下面一步步来实现：

核心思路 #

v-menu的attach属性允许你指定菜单元素挂载的目标DOM节点，我们只需要把它绑定到对应的列表项上，就能让菜单成为列表项的子元素，同时滚动时自然跟随列表项移动。

具体实现步骤 #

1. 给每个列表项设置唯一标识 #

在v-for循环渲染列表项时，给每个列表项添加唯一的id，方便attach属性精准定位：

<v-list>
  <v-list-item 
    v-for="item in items" 
    :key="item.id"
    :id="`menu-parent-${item.id}`"
  >
    <!-- 列表项内容 -->
    <v-list-item-title>{{ item.title }}</v-list-item-title>
    
    <!-- 菜单激活按钮 -->
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
      <v-menu
        :attach="`#menu-parent-${item.id}`"
        activator="parent"
        persistent
      >
        <v-list>
          <v-list-item @click="editItem(item)">
            <v-list-item-title>编辑</v-list-item-title>
          </v-list-item>
          <v-list-item @click="deleteItem(item)">
            <v-list-item-title>删除</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-btn>
  </v-list-item>
</v-list>

2. 确保列表项为相对定位 #

为了让菜单相对于列表项正确定位，需要给列表项设置position: relative（Vuetify的v-list-item默认已经包含这个样式，但如果自定义了样式可以手动补充）：

.v-list-item {
  position: relative;
}

3. 验证效果 #

此时查看DOM结构，你会发现每个menu__content元素已经嵌套在对应的v-list-item内部，完全符合你期望的清晰结构：

<v-list>
  <v-list-item id="menu-parent-1">
    <!-- 列表项内容 -->
    <div class="menu__content" ...>
      <!-- 菜单内容 -->
    </div>
  </v-list-item>
</v-list>

滚动列表时，菜单会随着对应的列表项一起滚动，再也不会出现和激活按钮脱节的情况。

额外注意事项 #

• attach属性可以接受CSS选择器或者DOM元素对象，如果用ref的话也可以直接传ref对象（比如:attach="menuItemRef"）
• 务必保证每个列表项的标识唯一，避免多个菜单挂载到同一个节点
• 如果菜单需要显示在列表项外部（比如超出列表宽度），不需要额外设置——v-menu默认是绝对定位，不会影响列表项的布局
• 若使用persistent属性，菜单不会因为点击外部而关闭，适合需要操作菜单时滚动列表的场景

这样调整后，不仅DOM结构更清晰易调试，滚动时菜单和激活按钮的联动也完全符合预期啦！

内容的提问来源于stack exchange，提问作者Stéphane Appercel