1.给组件加上id或者class,然后添加一个style,不要加scoped(vue可以有多个style),在组件里直接修改
2.利用深度::v-deep深度修改组建的样式,可以直接写在到scoped作用域的style里面
例:修改table表格背景等
<!-- 在element组件外加一层div,使其只在这个div内生效,防止改变全局 -->
<!-- 表头部分的样式需要利用组件提供的属性配合事件修改 -->
<div class="table-wrapper">
<el-table id="out-table" v-loading="loading"
:cell-style="getRowClass"
:header-cell-style="getRowClass" :data="tableData" style="width: 100%;">
</el-table>
</div>
methods:{
// 修改element样式
getRowClass({ row, column, rowIndex, columnIndex }) {
return "background:transparent; border:none";
}
}
//有scoped时,使用/deep/改变element样式
<style lang="less" scoped>
//找到组件对应的类名利用deep修改样式
.table-wrapper /deep/ .el-table, .el-table__expanded-cell {
background-color: transparent;
}
.table-wrapper /deep/ .el-table tr {
background-color: transparent!important;
}
.table-wrapper /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{
background-color: transparent;
}
.table-wrapper /deep/ .el-table::before {
height: 0;
}
.pager-box /deep/ .el-input__inner {
background-color: transparent;
color: #fff;
}
</style>
//没有加spoced时,直接利用父级+所使用的组件类名修改即可
<style>
.table-wrapper .el-table::before {
height: 0;
}
.pager-box .el-input__inner {
background-color: transparent;
color: #fff;
}
</style>