Quasar中QTable每行弹出上下文菜单偏移及默认菜单冲突问题

两个问题的核心原因：

1. 没有拦截浏览器默认的contextmenu事件，导致原生右键菜单和自定义菜单同时弹出
2. 手动控制v-model切换菜单显示时，没有将触发事件的坐标传递给q-menu，组件无法获取正确的定位锚点，出现位置偏移

修正方案如下：

关键修改点 #

• 在@row-contextmenu回调中第一时间执行evt.preventDefault()，直接阻止浏览器默认右键行为
• 给q-menu绑定组件ref，触发时调用q-menu实例自带的show()方法，将事件对象作为参数传入，组件会自动读取事件里的鼠标坐标/移动端长按坐标完成定位，不需要手动计算位置
• 移除q-menu上手动绑定的v-model，显示状态交给组件自身管理即可，保留touch-position属性适配移动端场景
• 增加响应式变量存储当前触发菜单的行数据，方便菜单项点击时获取对应行的信息执行业务逻辑

完整代码 #

<template>
  <q-page class="row items-center justify-evenly tiny-align">
    <q-menu ref="rowMenuRef" touch-position>
      <q-list dense>
        <q-item v-close-popup>
          <q-item-section>打开...</q-item-section>
        </q-item>
        <q-separator />
        <q-item clickable v-close-popup>
          <q-item-section>新建</q-item-section>
        </q-item>
      </q-list>
    </q-menu>

    <q-table
      class="full-width"
      :rows="rows"
      row-key="id"
      @row-contextmenu="popRowMenu"
    />
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { QMenu } from 'quasar';

class Student {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

const rowMenuRef = ref<QMenu | null>(null);
const currentRow = ref<Student | null>(null);
const rows = ref<Student[]>([
  { id: 1, name: 'Aaron' },
  { id: 2, name: 'Bob' },
]);

function popRowMenu(evt: MouseEvent | TouchEvent, row: Student) {
  // 拦截默认右键菜单
  evt.preventDefault();
  // 存储当前操作的行数据
  currentRow.value = row;
  // 传入事件对象唤起菜单，自动定位到触发位置
  rowMenuRef.value?.show(evt);
}
</script>

效果说明 #

• 同时兼容桌面端右键、移动端长按触发，无位置偏移问题
• Quasar会自动处理菜单的视口边缘避让，不需要手动写样式调整位置
• 菜单项的点击逻辑中直接读取currentRow.value即可拿到当前操作的行数据

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