为每一行指定一个递增整数的名称，以区分Vue.js表中的行

<table>
  <tr v-for="(item, index) in tableData" :key="index">
    <td>{{ index + 1 }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <!-- 其他表格列 -->
  </tr>
</table>

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id">
      <td>{{ getRowName(item.id) }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <!-- 其他表格列 -->
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        // 其他表格数据
      ]
    };
  },
  methods: {
    getRowName(id) {
      const index = this.tableData.findIndex(item => item.id === id);
      return index + 1;
    }
  }
};
</script>