healthy的反义词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表格控件表头与内容列不对齐问题
.el-table th.gutter {
display: table-cell!important;
}
勾弦//抽屉//element-ui的drawer固定底部按钮
/deep/ .el-drawer__body{
overflow-y: scroll;
margin-bottom: 50px;
}
.demo-drawer__footer{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;新生儿睡姿
text-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/
项⽬中⽤到了预处理器 scss 、sass、less 操作符 >>> 可能会因为⽆法编译⽽报错 。可以使⽤ /deep/。如果element-ui的样式为⾏内,使⽤穿透的情况下可以再加上!important来增加权重
注意:vue-cli3以上版本不可以
小米路由器ip
写法:
/deep/.el-table__body tr .current-row > td {
background-color: #F0F7FF !important;
}
3. ::v-deep
如果使⽤了预处理器都可以使⽤ ::v-deep
写法:
::v-deep .el-table__body tr.current-row > td {
background-color: #F0F7FF !important;
}