τα στοιχεία επικοινωνίας μου
Ταχυδρομείο[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Στο Nuxt 3, χρησιμοποιήστεv-data-table
στοιχείο, θέλουμε να μεταβούμε στη σελίδα όταν γίνεται κλικ σε μια συγκεκριμένη γραμμή ή κελί.Μπορείτε να ακούσετε το συμβάν κλικ του στοιχείου και να το χρησιμοποιήσετεuseRouter
για να επιτευχθεί άλμα σελίδας.
- <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>
Σε αυτό το παράδειγμα, όταν γίνεται κλικ σε οποιαδήποτε γραμμή του πίνακα,handleRowClick
Η συνάρτηση θα κληθεί και θα χρησιμοποιηθείuseRouter
τουpush
Μέθοδος μετάβασης σε νέα σελίδα, η διαδρομή προς αυτήν τη σελίδα δημιουργείται δυναμικά από το αναγνωριστικό χρήστη.Πρέπει να βεβαιωθείτε ότι το αναγνωριστικό κάθε χρήστη είναι μοναδικό, προκειμένου να μεταβείτε σωστά στην αντίστοιχη σελίδα λεπτομερειών.