Berbagi teknologi

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

Di Nuxt 3, gunakanv-data-table komponen, kita ingin melompat ke halaman ketika baris atau sel tertentu diklik.Anda dapat mendengarkan acara klik komponen dan menggunakannyauseRouterUntuk mencapai lompatan halaman.

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

Dalam contoh ini, ketika baris mana pun pada tabel diklik,handleRowClickFungsi tersebut akan dipanggil dan digunakanuseRouterdaripush Metode untuk melompat ke halaman baru, jalur ke halaman ini dihasilkan secara dinamis oleh ID pengguna.Anda perlu memastikan bahwa setiap ID pengguna unik agar dapat melompat ke halaman detail terkait dengan benar