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;
}
}
}
}
</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>