Element ui 自定义表格行样式

如图：

 

 

代码：

<div>
          <template>
            <!-- 设置表头与表格样式 :row-class-name="tableRowClassName" :header-cell-style="getRowClass"-->
            <el-table
              :data="tableData"
              style="width: 100%;"
              :row-class-name="tableRowClassName"
              :header-cell-style="getRowClass"
            >
              <el-table-column prop="amount1" label="序号" width="120"></el-table-column>
              <el-table-column prop="amount2" label="地区" width="180"></el-table-column>
              <el-table-column prop="amount3" label="浏览量"></el-table-column>
              <el-table-column prop="amount4" label="访客数"></el-table-column>
              <el-table-column prop="amount5" label="商品浏览量"></el-table-column>
              <el-table-column prop="amount6" label="商品访客数"></el-table-column>
            </el-table>
          </template>
        </div>

<script>
export default {
  name: '',
  data () {
    return {
     tableData: [{
        amount1: '1',
        amount2: '广东',
        amount3: '342',
        amount4: '12',
        amount5: '124',
        amount6: '34'
      },
      {
        amount1: '1',
        amount2: '广东',
        amount3: '342',
        amount4: '12',
        amount5: '124',
        amount6: '34'
      }]
    }  },
  methods: {

    // 为表格行添加样式
    tableRowClassName ({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'double'　　//  基数行对应的类

      } else {
        return 'single'　　//  偶数行对应的类

      }
    },
    // 为表格头行添加样式
    getRowClass ({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background:#ebeaef'
      } else {
        return ''
      }
    },

  }
}
</script>

/*更改表格颜色*/
  .double {
    height: 50px;
    background: #f5f5f5 !important;
  }
  .single {
    height: 50px;
    background: #ffffff !important;
  }

 

更多参考：https://www.huanggr.cn/1654.html