1、需求:el-table仅对后几列应用斑马线,前两列不应用斑马线
效果:
2、实现
关键是运用el-table的cell-class-name属性,参数是有行索引、列索引,返回一个样式。Function({row, column, rowIndex, columnIndex})
下面代码中是:cell-class-name=“tableCellClassName” 起斑马纹作用
<el-table class="tableIner"
:data="testResult"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
:cell-class-name="tableCellClassName" >
<el-table-column v-for="(item,index) in itemName"
:prop="item.engName"
:label="item.name"
:width="item.width"
class-name="specailStyle">
</el-table-column>
</el-table>
在method方法里写tableCellClassName函数
逻辑是对列号大于1的,以及行号是奇数的,应用trip-row样式。
tableCellClassName({
row, column, rowIndex, columnIndex}){
if (columnIndex >1 && rowIndex %2==1) {
return 'trip-row';
} else{
return '';
}
},
接下来在style里定义trip-row样式
::v-deep .el-table .trip-row {
background-color: #FAFAFA;
}