el-table鼠标移入变色、el-table排名样式变化_el-table鼠标移动上去变色

背景颜色实现效果：

::v-deep .el-table .el-table__body tr td:hover{
  background-color: #d4b021 !important;
}

边框实现效果：

::v-deep .el-table .el-table__body tr td {
  border: 2px solid transparent !important;
}
::v-deep .el-table .el-table__body tr td:hover {
  border: 2px solid red !important;
}

鼠标移入更换整行的背景颜色，实现效果：

 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #212e3e !important;
}

二、el-table排名样式变化（前几名有不同背景或不一样的样式。） 

         <el-table-column
                        type="index"
                        label="排名"
                        width="50"
                        style="margin-left:50px;white-space: nowrap;">
                        <template scope="scope" >
							<span class="index_common" :text="scope.$index + 1" :class="[scope.$index + 1 == '1' ? 'index_one' : scope.$index + 1 == '2' ? 'index_two' : scope.$index + 1 == '3' ? 'index_three' : 'index_other']">
								{{ scope.$index + 1 }}
							</span>
						</template>
                    </el-table-column>
 
//不同样式：
<style>
 .index_one{
        display: inline-block;
        line-height: 40px;
        width: 40px;
        height: 38px;
        background: #E8512E;
        opacity: 0.8;
        font-size: 24px;
        font-family: Myriad Pro;
        color:#ffffff
        // margin-left: -40px;
            }
    .index_two{
        width: 40px;
        height: 38px;
        display: inline-block;
        line-height: 40px;
        background: #FFC000;
        opacity: 0.8;
        font-size: 24px;
        font-family: Myriad Pro;
        color:#ffffff
        // margin-left: -40px;
            }
    .index_three{
        width: 40px;
        height: 38px;
        display: inline-block;
        line-height: 40px;
        background: #00C0FF;
        opacity: 0.8;
        font-size: 24px;
        font-family: Myriad Pro;
        color:#ffffff
        // margin-left: -40px;
            }
</style>