elementplus表格隔行变色

Element Plus 是一个基于 Vue.js 的 UI 组件库，它提供了丰富的表格组件，其中包括对表格样式定制的支持，包括隔行变色（也称为表格外加样式或行间样式）。在 Element Plus 中，你可以使用 `:class` 或者 `style` 属性来为表格的行设置不同的 CSS 类，以便实现隔行变色。

例如，你可以这样做：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>

  <!-- 添加一个计算属性，用于控制行的背景颜色 -->
  <template slot-scope="scope">
    <tr :class="{ 'odd-row': (index + 1) % 2 !== 0 }">
      <!-- ... 其他表格内容 ... -->
    </tr>
  </template>
</el-table>

在上面的代码中，`:class="{ 'odd-row': (index + 1) % 2 !== 0 }"` 就是给每一行设置了一个名为 `odd-row` 的 CSS 类，当行号奇数时（即隔一行），`odd-row` 类会被激活，从而改变行的背景色。`index` 是 Vue 中的一个内置属性，表示当前行的索引。

如果你想用样式来实现，也可以直接在 CSS 中定义 `.odd-row` 类的样式：

.odd-row {
  background-color: lightgray; /* 更改为你想要的颜色 */
}