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

1、需求:el-table仅对后几列应用斑马线,前两列不应用斑马线
效果:
el-table对指定列设置斑马线_第1张图片
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;
        }

你可能感兴趣的:(javascript,vue.js,elementui)