当前位置：首页 > VUE

vue实现条纹表格

2026-02-18 11:30:35VUE

实现条纹表格的方法

使用 Vue 实现条纹表格可以通过多种方式完成，以下是几种常见的实现方法。

使用 CSS 控制样式

通过 CSS 的 :nth-child 选择器实现条纹效果，适用于静态或动态生成的表格。

<template>
  <table class="striped-table">
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<style>
.striped-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

动态绑定 class

通过 Vue 的动态 class 绑定，根据行索引的奇偶性添加不同的样式类。

<template>
  <table>
    <tr 
      v-for="(item, index) in tableData" 
      :key="index" 
      :class="{ 'even-row': index % 2 === 0 }"
    >
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<style>
.even-row {
  background-color: #f2f2f2;
}
</style>

使用计算属性

通过计算属性为数据添加样式标记，再动态绑定样式。

<template>
  <table>
    <tr 
      v-for="item in stripedData" 
      :key="item.id" 
      :style="{ backgroundColor: item.bgColor }"
    >
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    };
  },
  computed: {
    stripedData() {
      return this.tableData.map((item, index) => ({
        ...item,
        bgColor: index % 2 === 0 ? '#f2f2f2' : 'transparent'
      }));
    }
  }
};
</script>

使用第三方库

如果需要更复杂的功能（如排序、分页），可以集成第三方表格库（如 Element UI 或 Vuetify），它们内置了条纹表格样式。

vue实现条纹表格

<template>
  <el-table :data="tableData" stripe>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui';

export default {
  components: { ElTable, ElTableColumn },
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    };
  }
};
</script>