背景颜色实现效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/0efd7a62f3d34a1aad37f8784601f4c8.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5ZCD54K46bih55qE5YmN56uv,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
::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>