vue3自定义右键菜单放在arco-design表格组件内部，位置固定在右键点击范围

您可以使用Vue3中的v-contextmenu指令来实现在arco-design表格组件内部自定义右键菜单，并且位置固定在右键点击范围。

首先，在arco-design表格组件上绑定v-contextmenu指令，并且传入一个方法名，该方法名用于在右键点击时触发显示自定义菜单的操作。例如：

<template>
  <div>
    <AcoTable v-bind="$props" v-contextmenu="showContextMenu"></AcoTable>
  </div>
</template>

<script>
export default {
  props: {
    // arco-design表格组件的props
  },
  methods: {
    showContextMenu(e) {
      // 显示自定义菜单的操作
    }
  }
}
</script>

然后，在该组件内部定义自定义菜单的模板，例如：

<template id="my-context-menu">
  <div class="my-context-menu">
    <ul>
      <li>菜单项1</li>
      <li>菜单项2</li>
      <li>菜单项3</li>
    </ul>
  </div>
</template>

最后，在showContextMenu方法中，根据鼠标点击的位置动态计算出自定义菜单的位置，并且使用Vue3中的teleport组件将自定义菜单渲染到body元素下。例如：

showContextMenu(e) {
  e.preventDefault(); // 阻止原本的右键菜单弹出
  const contextMenu = document.querySelector('#my-context-menu');
  const { clientX, clientY } = e;
  contextMenu.style.left = `${clientX}px`;
  contextMenu.style.top = `${clientY}px`;
  const portal = document.createElement('div');
  document.body.appendChild(portal);
  createVNode(Teleport, { to: 'body' }, [
    createVNode(contextMenu.content.cloneNode(true))
  ]).mount(portal);
}

在以上代码中，使用document.querySelector方法获取自定义菜单的模板，然后根据鼠标点击的位置动态计算出自定义菜单的位置，并且使用Vue3中的teleport组件将自定义菜单渲染到body元素下。

最后，您需要在CSS中定义自定义菜单的样式，使其固定在右键点击范围。例如：

.my-context-menu {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

通过以上步骤，您就可以在arco-design表格组件内部实现自定义右键菜单，并且位置固定在右键点击范围了。