v-data-table 中“每页行数”菜单的位置计算错误

Posted 2023-02-22

【中文标题】v-data-table 中“每页行数”菜单的位置计算错误

【英文标题】：Faulty calculation of position of "Rows per page" menu in a v-data-table

【发布时间】：2020-12-13 03:55:25

【问题描述】：

vue-data-table 中“每页行数”的错误定位

使用组件v-data-table时，子组件v-data-footer中的菜单Rows per page计算错误.请看下面的截图。

经过一番研究，我发现 menu components 默认将其定位上下文附加到 root v-app 组件，并且有一个名为attach 配置该行为。

奇怪的是，应用程序的实际位置被忽略了，似乎假设应用程序的左上角位于 0px/0px。我进行了实验，并在左上角为我的应用程序提供了一个固定的位置——然后菜单的位置可以正常工作。否则，它在 x 轴（由于周围网格系统的相对位置）和 y 轴（管理栏和标题的高度）上关闭。

我的 vue 应用程序在 WordPress 上下文中运行。一堆迷你应用程序，通过简码呈现来自其他插件的数据。到目前为止，这工作正常（轻微的样式问题），除了使用 Vuetify 时这些菜单的定位。

我想一个解决方案可能是为分页菜单设置附加属性，但到目前为止，研究和文档对如何在 v-data-table 中执行此操作没有帮助。如有任何提示，我将不胜感激。

我尝试重新创建一个类似的situation in a CodePen，但 y 偏移的行为略有不同。

截图

【问题讨论】：

经过更多研究，菜单元素的定位问题似乎在 Vuetify 中很常见，当人们尝试在另一个上下文中使用应用程序或想要使用具有不同定位的父元素时，创建通过插件等。目前我认为唯一的解决方案是移动到一个包含可以更独立使用的组件的库。我猜 Vuetify 只是采用了另一种方法。

【参考方案1】：

在 codepen 检查您的代码后，我修复了一些部分。 请检查此代码笔。 https://codepen.io/endmaster0809/pen/qBZRQKd

<div id="app">
  <v-app id="inspire">

    <div id="wpadminbar">WP Admin Bar</div>

    <header id="header">Header</header>

    <div id="wrapper">
      <main>
        <h2>Vue App</h2>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="4"
          class="elevation-1"
        ></v-data-table>

      </main>
      <aside>
        <h3>Sidebar<h3>  
        <ul>
          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem</li>
        </ul>
      </aside>  
    <div>    
  </v-app>
</div>

【讨论】：

谢谢。但笔只是说明效果的一个例子。我不能用 标签包围 WordPress。该应用程序位于 WordPress 页面的网格系统中。在您的示例中，您的应用程序位于坐标 0/0。这不是我的问题。猜猜我将不得不在 WP 环境中在线提供一个完整的例子，这样它就不会产生误导。抱歉，我的问题没有更清楚。

我有几个 在 wordpress 主题中呈现。这意味着每个 都有具有相对定位的父级以及上下许多其他元素。由于 vue-data-table 的性质，它默认从左上角计算。如果应用程序位于左上角，则效果很好，就像您提供的示例一样。在我的情况下，情况并非如此。我希望这能让它更清楚。我正在研究一个更合适的代码示例。

您找到解决方案了吗？