vue+element-UI表格（Table）组件中⿏标（hover）悬停、悬浮时样式的修改vue+Element-Ui表格（Table）组件中⿏标（hover）悬停、悬浮时样式的修改
element悬停本⾝的样式：
修改后的效果
颜⾊可以换成你⾃⼰需要的颜⾊，我写的这个颜⾊是真的难看，哈哈哈哈
scss中写法（不会影响其他页⾯中的表格样式）
<style lang="scss" scoped>
/
/表格⿏标悬停的样式（背景颜⾊）
/deep/{
.el-table{
tbody tr{
&:hover{
td{
background-color: #2cce34;
}
}
}
}
}
//表格⿏标悬浮时的样式（⾼亮）
/deep/{
.el-table--enable-row-hover{
.el-table__body tr{
&:hover{
background:rgb(184, 224, 250);
border: 1px solid #313463;
}css鼠标点击样式
}
}
}
</style>
css写法（会影响其他页⾯中的表格样式），可以⽤⼀个div把表格包起来给个class名，然后应该就不会影响其他页⾯中的表格样式了
<style>
/* 表格⿏标悬浮时的样式（⾼亮） */
.el-table--enable-row-hover .el-table__body tr:hover{
background:rgb(184, 224, 250);
border: 1px solid #313463;
}
/*表格⿏标悬停的样式（背景颜⾊）*/
.el-table tbody tr:hover > td{
background-color: #2cce34 !important;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。