Vue里使用Element-ui组件el-table设置指定行样式(采用cell-style方案避row-class-name坑)

Vue里使用Element-ui组件el-table设置指定行样式(采用cell-style方案避row-class-name坑)

问题描述：根据项目开发需求，需要对table指定的行或者列进行样式设置。Element-ui中table提供的row-class-name提供的方案是真的坑，改用cell-style方案。先给出效果图：即实现自定义斑马条纹样式。
其他方法参考Element-ui官方文档：Element-ui文档
1、el-table绑定cell-style方法：

<el-table
    :header-cell-style="getRowClass"
    :cell-style="rowStyle"
    :data="tableData"
    style="border:0px;width: 100%;">

2、methods里写cell-style绑定的方法我这里方法名称rowStyle：
具体实现什么，根据自己的需求来即可

rowStyle({row, column, rowIndex, columnIndex}){
                //设置表格每行间隔颜色
                if (rowIndex%2===0){
                    return "background:#2A3056;border:none;color: #FFFFFF;"
                }
                if (rowIndex%2===1){
                    return "background:#2E335E;border:none;color: #FFFFFF;"
                }
            },

3、上述处代码即可实现所需的指定行样式的需求。
4、同理，实现表头指定样式只需绑定header-cell-style方法即可：上述代码中已列出

:header-cell-style="getRowClass"

5、绑定表头header-cell-style的getRowClass方法如下：

//设置表头背景颜色
getRowClass({ row, column, rowIndex, columnIndex }) {
                return "background:#363C74;border:none;color: #FFFFFF;";
            },

6、实现后的效果图如下：
兄弟萌赶快试试吧！