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

Question

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

<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>

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

非常感谢任何帮助！

Answer 1

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

现在你可能在想……

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

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

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

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