element-ui表格table、抽屉drawer涉及的部分样式修改//表格//element-ui的table改变选中⾏背景⾊
/deep/.el-table__body tr.current-row > td {
background-color: #F0F7FF !important;
}
//表格//element-ui的table改变偶数⾏背景⾊
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td{
// background: #F5F7FA;
}
//表格//解决element-ui的table表格控件表头与内容列不对齐问题
2012年11月3日
.el-table th.gutter {
threesdisplay: table-cell!important;
}
//抽屉//element-ui的drawer固定底部按钮
/deep/ .el-drawer__body{
overflow-y: scroll;
margin-bottom: 50px;detective
}
.demo-drawer__footer{
六级成绩换算width: 100%;
position: absolute;
bottom: 0;
left: 0;
google glass
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
llctext-align: right;
background-color: white;
}
//抽屉//去掉element-ui的drawer标题选中状态
/deep/ :focus{哈尔滨雅思培训学校
outline:0;
}
针对评论区的问题整理：
有些样式直接在组件中修改⽆效，⽽scoped局限于当前组件，去掉scoped的话⼜会影响全局样式。
针对这种情况，可以使⽤深度作⽤选择器（即样式穿透）。
1. >>>
如果项⽬使⽤的是css原⽣样式，那么可以直接使⽤ >>> 穿透修改
写法：
.myclass >>> .el-upload-list .el-upload-list__item img {
width: 20px;
height: 20px;
}
2. /deep/virtually
项⽬中⽤到了预处理器 scss 、sass、less 操作符 >>> 可能会因为⽆法编译⽽报错 。可以使⽤ /deep/。如果element-ui的样式为⾏内，使⽤穿透的情况下可以再加上!important来增加权重
注意：vue-cli3以上版本不可以
晚安的英文写法：
/deep/.el-table__body tr .current-row > td {
background-color: #F0F7FF !important;
}oops
3. ::v-deep
如果使⽤了预处理器都可以使⽤ ::v-deep
写法：
::v-deep .el-table__body tr.current-row > td {
background-color: #F0F7FF !important;
}
