Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Verwenden Sie in Nuxt 3v-data-table Komponente möchten wir zur Seite springen, wenn auf eine bestimmte Zeile oder Zelle geklickt wird.Sie können das Klickereignis der Komponente abhören und verwendenuseRouterum einen Seitensprung zu erreichen.

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    @click:row="handleRowClick"
  ></v-data-table>
</template>
 
<script setup>
import { useRouter } from 'vue-router';
 
const router = useRouter();
 
const headers = [
  { text: 'Name', value: 'name' },
  { text: 'Age', value: 'age' },
  // ... 
];
 
const items = [
  { name: 'John Doe1', age: 30, id: 1 },
  { name: 'Jane Smith2', age: 25, id: 2 },
  // ... 
];
 
// 处理行点击事件
function handleRowClick(item) {
  // 使用item.id或其他标识符来确定要跳转到的具体页面
  router.push(`/user/${item.id}`);
}
</script>

Wenn in diesem Beispiel auf eine beliebige Zeile der Tabelle geklickt wird,handleRowClickDie Funktion wird aufgerufen und verwendetuseRoutervonpush Methode zum Springen zu einer neuen Seite. Der Pfad zu dieser Seite wird dynamisch durch die Benutzer-ID generiert.Sie müssen sicherstellen, dass die ID jedes Benutzers eindeutig ist, um korrekt zur entsprechenden Detailseite zu springen.