Element-ui table组件定制索引列的样式

我们在使用element-ui做表格的时候经常会遇到一些定制的表格样式，比如下图：

其他的都好说，但是索引定制样式该怎么实现呢？

通过对element-ui table组件文档的查看，发现了这个：

上代码：

html:

js

css

.colStyleRed .cell>div {
            width: 34px;
            height: 36px;
            background: #B44354;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FEFEFE;
        }
        
        .colStyleBlue .cell>div{
            width: 34px;
            height: 36px;
            background: #1766C2;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FEFEFE;
        }
        .colStyleGreen .cell>div{
            width: 34px;
            height: 36px;
            background: #469F87;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FEFEFE;
        }
        

如果有更简单的方法，欢迎留言~~