用Vue.js初始化的HTML表格:如何替换行颜色

<template>
  <table>
    <tr v-for="(row, index) in tableData" :key="index" :class="getRowClass(index)">
      <td>{{ row.column1 }}</td>
      <td>{{ row.column2 }}</td>
      <!-- 其他列 -->
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { column1: '数据1', column2: '数据2' },
        { column1: '数据3', column2: '数据4' },
        // 其他行数据
      ]
    };
  },
  methods: {
    getRowClass(index) {
      return index % 2 === 0 ? 'even-row' : 'odd-row'; // 根据索引判断奇偶行
    }
  }
};
</script>

<style>
.even-row {
  background-color: #f0f0f0; // 偶数行颜色
}

.odd-row {
  background-color: #ffffff; // 奇数行颜色
}
</style>