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;
}