vue中修改element-ui样式

最新推荐文章于 2025-04-08 15:02:11 发布

Lval

最新推荐文章于 2025-04-08 15:02:11 发布

阅读量1.9k

点赞数 1

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_42215897/article/details/109808534

版权

css 专栏收录该内容

6 篇文章

订阅专栏

介绍了Vue组件样式修改的两种方法。一是给组件添加id或class，添加无scoped的style直接修改；二是利用深度选择器::v-deep在scoped作用域的style里修改，还给出修改table表格背景的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>