单击带有模板行的v-data-table中的行

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    item-key="id"
  >
    <template v-slot:item="{ item }">
      <tr @click="handleRowClick(item)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.email }}</td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'Email', value: 'email' },
      ],
      items: [
        { id: 1, name: 'John Doe', age: 30, email: 'john@example.com' },
        { id: 2, name: 'Jane Smith', age: 25, email: 'jane@example.com' },
        { id: 3, name: 'Bob Johnson', age: 35, email: 'bob@example.com' },
      ],
    };
  },
  methods: {
    handleRowClick(item) {
      // 在这里处理行的单击事件
      console.log('Clicked row:', item);
    },
  },
};
</script>