el-table对指定列设置斑马线

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

猜你喜欢

转载自blog.csdn.net/qq_43840793/article/details/130259394