Vuetify - 如何在当前光标位置访问 v-data-table 中的元素

Question

我正在使用 v-data-table 来列出也显示在地图上的位置。同步突出显示会很好，这样如果光标悬停在 table 中的位置，相同的位置将在地图上突出显示。

有没有办法访问 v-data-table 中光标当前悬停的元素？

Answer 1

作为可能的解决方案之一，您可以覆盖 #items 插槽并将本机 mouseover 事件包含到 <tr> 标记中：

<span class="text-h6">{{ `Last hovered location: ${hoveredLocation}` }}</span>
<v-data-table
  :headers="headers"
  :items="locations"
  :items-per-page="5"
>
  <template #item="{ item }">
    <tr @mouseover="onMouseOver(item)">
      <td>{{ item.city }}</td>
      <td>{{ item.country }}</td>
    </tr>
  </template>
</v-data-table>
...
data () {
  return {
    hoveredLocation: null,
    headers: [
      { text: 'City', value: 'city' },
      { text: 'Country', value: 'country' },
    ],
    locations: [
      { id: 3, city: 'Paris', country: 'France'},
      ...
    ],
  }
},
methods: {
  onMouseOver(item) {
    this.hoveredLocation = `${item.city} (${item.country})`;
  }
}

可能您需要组合多个事件，例如 mouseover/out、mouseenter/leave 等

测试这个 at CodePen。

Vuetify - 如何在当前光标位置访问 v-data-table 中的元素

Vuetify - How to access element in v-data-table at current cursor position

vuetify.js

v-data-table