如何在VueJS中使表格中的行可点击？

<template>
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id" @click="handleRowClick(item)">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <td>{{ item.column3 }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, column1: '数值1', column2: '数值2', column3: '数值3' },
        { id: 2, column1: '数值4', column2: '数值5', column3: '数值6' },
        { id: 3, column1: '数值7', column2: '数值8', column3: '数值9' },
      ],
    };
  },
  methods: {
    handleRowClick(item) {
      // 处理点击行的逻辑操作，例如跳转到详情页
      console.log('点击了行', item);
    },
  },
};
</script>