1、修改斑马线表格背景
vue3使用 :
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
background: #ccc;
}
vue2使用:
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
background: #ccc;
}
2、修改表格头部背景
vue3使用 :
::v-deep .el-table th{
background: #CCCCCC;
}
vue2使用:
/deep/ .el-table th{
background: #CCCCCC;
}
3、修改表格行背景
vue3使用 :
::v-deep .el-table tr{
background: #eee;
}
vue2使用 :
/deep/ .el-table tr{
background: #eee;
}
4、修改表头字体颜色
vue3使用 :
::v-deep .el-table thead {
color: #ccc;
font-weight: 700;
}
vue2使用 :
/deep/ .el-table thead {
color: #ccc;
font-weight: 700;
}
5、修改行内线的颜色
vue3使用 :
::v-deep .el-table td,.building-top .el-table th.is-leaf {
border-bottom: 2px solid #eee;
}
vue2使用 :
/deep/ .el-table td,.building-top .el-table th.is-leaf {
border-bottom: 2px solid #eee;
}
6、修改表格最底部边框颜色和高度
vue3使用 :
::v-deep .el-table::before{
border-bottom: 1px solid #ccc;
height: 3px
}
vue2使用 :
/deep/ .el-table::before{
border-bottom: 1px solid #ccc;
height: 3px
}
7、修改表格内容字体颜色和字体大小
vue3使用 :
::v-deep .el-table{
color: #6B91CE;
font-size: 14px;
}
vue2使用 :
/deep/ .el-table{
color: #6B91CE;
font-size: 14px;
}
8、修改表格鼠标悬浮
hover
背景色
vue3使用 :
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: pink;
}
vue2使用 :
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: pink;
}