链接到表格 HTML / Vuetify.js 中的特定行

Posted 2023-02-23

【中文标题】链接到表格 HTML / Vuetify.js 中的特定行

【英文标题】：Link to specific line within a table HTML / Vuetify.js

【发布时间】：2020-02-06 23:56:32

【问题描述】：

我在 Vuetify 中使用 v-simple-table 以每行一行显示日志的内容。我需要能够向某人发送一个链接，将他们带到表格中的特定行。我试图通过使用每个元素的 id 作为哈希锚来完成此操作，但链接只是重新加载页面。

<v-simple-table  dense>
<template v-slot:default>
  <tbody>
    <tr v-for="(line, index) in logFile" :key="index">
      <td class="accent--text" v-show="showLineNumbers">
        <a :id="index" :href="'#/logs/view/204#'+index"> index </a>
      </td>
      <td> line </td>
    </tr>
  </tbody>
 </template>
</v-simple-table>

此表位于页面上 v-container 内的 v-card 中。例如，当我将鼠标悬停在日志第 100 行的数字上时，链接预览为“mydomain/logs/view/204#100”，并且检查元素显示它的 id 为 100，但只是转到浏览器中的链接在顶部加载页面。

非常感谢任何帮助！

【参考方案1】：

问题是浏览器无法将用户发送到页面中不存在的部分，所以它只是停留在顶部。

现在你可能在想……

但它显然在那里，我检查过，我看到了。

但是，您引用的索引需要在打开页面时存在，并且由于内容是在页面加载后生成的，因此此功能将不起作用。

如果你想让它工作，你将不得不在表格渲染后自己实现滚动。

一种方法是从 url 获取索引。 window.location.hash 会给你hashbang，然后你可以使用像vue-scrollto 这样的库来做滚动。

【讨论】：

现在说得通了！谢谢 - 我会尝试一下这些建议，并用我找到的最终解决方案更新我的问题。