PrimeVue TieredMenu组件弹窗位置不随触发按钮更新问题求助

问题原因分析 #

1. 普通Table场景：按钮点击时未传递$event，导致TieredMenu的toggle方法无法获取触发按钮的DOM位置，只能使用默认定位。
2. DataTable场景：循环渲染的TieredMenu绑定了同一个ref，最终ref仅指向最后一个菜单组件，点击任意按钮都会操作最后一个菜单，导致位置错误。

解决方案 #

方案1：使用单个TieredMenu（通用场景） #

只需要一个全局的TieredMenu组件，点击按钮时传递正确的$event，让菜单根据触发按钮定位：

<template>
  <!-- 普通Table版本 -->
  <table>
    <tr v-for="item in data" :key="item.id">
      <td><button @click="toggle($event)">options</button></td>
      <td>{{ item.label }}</td>
    </tr>
  </table>

  <!-- DataTable版本 -->
  <DataTable :value="data" size="small" selectionMode="single" stripedRows>
    <Column style="width: 50px">
      <template #body="slotProps">
        <Button icon="pi pi-ellipsis-v" @click="toggle($event)" rounded text/>
      </template>
    </Column>
    <Column field="label" header="LABEL"></Column>
  </DataTable>

  <!-- 单个全局TieredMenu -->
  <TieredMenu ref="tieredMenuRef" :model="menuModel" popup/>
</template>

<script setup>
import { ref } from 'vue';
import { DataTable, Column, Button, TieredMenu } from 'primevue';

const data = [...]; // 你的业务数据
const menuModel = [...]; // 你的菜单配置
const tieredMenuRef = ref(null);

const toggle = (event) => {
  tieredMenuRef.value.toggle(event);
};
</script>

方案2：每行独立TieredMenu（菜单需根据行数据动态调整） #

如果需要每行的菜单内容不同，可以给每个菜单绑定独立的ref，通过索引操作对应行的菜单：

<template>
  <DataTable :value="data" size="small" selectionMode="single" stripedRows>
    <Column style="width: 50px">
      <template #body="slotProps">
        <Button icon="pi pi-ellipsis-v" @click="toggle($event, slotProps.index)" rounded text/>
        <!-- 用函数式ref给每行菜单绑定独立引用 -->
        <TieredMenu 
          :ref="el => el && (tieredMenuRefs[slotProps.index] = el)" 
          :model="getRowMenu(slotProps.data)" 
          popup
        />
      </template>
    </Column>
    <Column field="label" header="LABEL"></Column>
  </DataTable>
</template>

<script setup>
import { ref } from 'vue';
import { DataTable, Column, Button, TieredMenu } from 'primevue';

const data = [...];
const tieredMenuRefs = ref([]);

// 根据行数据生成对应菜单
const getRowMenu = (row) => {
  return [
    { label: `编辑 ${row.label}`, icon: 'pi pi-pencil' },
    { label: `删除 ${row.label}`, icon: 'pi pi-trash' }
  ];
};

const toggle = (event, index) => {
  tieredMenuRefs.value[index].toggle(event);
};
</script>

关键注意点 #

• 必须传递$event给toggle函数，否则TieredMenu无法获取触发按钮的位置。
• 循环渲染菜单时，避免使用同一个静态ref，改用函数式ref或数组存储多个ref。
• 确保TieredMenu的popup属性已设置，启用弹窗模式而非静态显示。

内容的提问来源于stack exchange，提问作者pedroPG