elementui表格隔行变色

element-ui表格可以通过两种方式来实现隔行变色效果。第一种方式是使用stripe属性，该属性可以在el-table标签上设置，比如<el-table :stripe="true"> </el-table>。这样创建出来的表格会有隔行效果，但是颜色变化不够明显。第二种方式是使用row-class-name属性，该属性可以在el-table标签上设置，并且需要在methods中定义tableRowClassName方法来返回具体的样式类名。比如：

<template> 
  <el-table :row-class-name="tableRowClassName">
  </el-table> 
</template> 

<style> 
.el-table .warning-row { 
  background: oldlace; // 这里可以修改颜色 
} 

.el-table .success-row { 
  background: #f0f9eb; // 这里可以修改颜色 
} 
</style> 

<script> 
export default { 
  methods: { 
    tableRowClassName({row, rowIndex}) { 
      if (rowIndex === 1) { 
        return 'warning-row'; 
      } else if (rowIndex === 3) { 
        return 'success-row'; 
      } 
      return ''; 
    } 
  } 
} 
</script>

需要注意的是，如果已经设置了stripe属性，再设置row-class-name属性，会导致斑马纹颜色的改变，无法实现明显的隔行变色效果。因此，如果想要明显的隔行变色效果，可以去掉stripe属性即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span>