el-table は、指定された列のゼブラ クロッシングを設定します

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

おすすめ

転載: blog.csdn.net/qq_43840793/article/details/130259394