el-table 自定义隔行变色

最新推荐文章于 2025-09-14 21:58:58 发布

转载最新推荐文章于 2025-09-14 21:58:58 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：www.baidu.com

文章标签：

#css #html #前端

该文章介绍了一种在Vue.js应用中，使用el-table组件通过row-class-name属性自定义样式，实现表格数据隔行显示不同颜色的效果。方法是根据行索引判断奇偶性，分别设置oddRow和evenRow类，定义不同的背景色和文字颜色。

el-table 自定义隔行变色

主要实现的原理是利用每行的下标来实现单，偶区分，添加不同的样式

<el-table :data="tableData"  fit   :row-class-name="tableRowClassName">
       <el-table-column type="index" label="序号"></el-table-column>
       <el-table-column prop="name" label="名称"></el-table-column>
       <el-table-column prop="length" label="长度(km)" ></el-table-column>
 </el-table>

methods方法：

tableRowClassName({ rowIndex }) {
     if ((rowIndex + 1) % 2 === 0) {
          return 'oddRow';
     }
      return 'evenRow';
 },

style样式

.oddRow {
      //斑马纹样式
       color: white;
        background-color:rgba(15, 48, 60, .55);
}
 .evenRow {
         background-color: rgba(22,78,97, 0.55);
          color: white;
}