Link 到 table HTML / Vuetify.js 中的特定行

Question

我在 Vuetify 中使用 v-simple-table 来每行一行显示日志的内容。我需要能够向某人发送 link，将他们带到 table 中的特定行。我试图通过使用每个元素的 id 作为散列锚来实现这一点，但 link 只是重新加载页面。

<v-simple-table height="500px" 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>

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

非常感谢任何帮助！

Answer 1

问题是浏览器无法将用户转到不存在的页面部分，因此它只停留在顶部。

现在您可能在想...

But it's clearly there, I checked it, I see it.

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

如果你想让它工作，你将不得不自己实现滚动以在呈现 table 之后发生。

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

Link 到 table HTML / Vuetify.js 中的特定行

Link to specific line within a table HTML / Vuetify.js

html

anchor

vue-component

vuetify.js