1. 要件: el-table は、ゼブラ クロッシングを最後の数列にのみ適用し、最初の 2 列にはゼブラ クロッシングを適用しません. 効果: 2. 実装の鍵は、el- の
cell
-
class-name 属性を使用することです。 table. パラメータは行インデックスと列インデックスで、スタイルを返します。
次のコードの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 で定義します
::v-deep .el-table .trip-row {
background-color: #FAFAFA;
}