el-table中的斑马纹样式修改

在Element UI的el-table组件中，如果你想为表格的行添加斑马纹样式，即交替的背景颜色，可以通过设置`row-class-name`属性来实现自定义样式。这个属性接受一个函数，该函数接收当前行的数据作为参数，返回对应的CSS类名。

示例代码如下：

<el-table :data="tableData" row-class-name="getRowClass">
  <!-- 表头 -->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <!-- 其他列... -->
</el-table>

<script>
export default {
  methods: {
    getRowClass({ index, row }) { // index是行索引，row是数据对象
      let color;
      if (index % 2 === 0) {
        color = 'even-row'; // 如果索引是偶数，表示白色背景
      } else {
        color = 'odd-row'; // 否则，表示灰色背景
      }
      return `row-${color}`;
    }
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        ... // 更多数据...
      ]
    };
  }
}
</script>

<style scoped>
.row-even {
  background-color: #ffffff; /* 白色背景 */
}

.row-odd {
  background-color: #f2f2f2; /* 灰色背景 */
}
</style>

在这个例子中，我们创建了两个CSS类`.row-even`和`.row-odd`来分别对应奇数行和偶数行的背景颜色，并在`getRowClass`方法中根据行索引动态决定添加哪个类名。