博客

需求：调整el-table表格的默认样式，直接在el-table和el-table-column上设置style并不会生效，需要在调试模式下（鼠标右击，选择“检查”）查看表格元素的实际位置，并设置其样式。

代码

先上代码。在HTML代码中，定义了el-table，并设置其class=“mainTable”（也可直接在css中使用.el-table），对其进行样式调整的CSS代码如下：

<style scoped>
:deep(.mainTable th .cell){
    text-align: center;
    font-weight: bold;
    color:black
}
:deep(.mainTable td .cell){
    padding:2px 2px;
    text-align: center;
}
</style>

说明：

scoped

当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。

:deep()

scoped穿透，从而能影响到子组件

在vue3 + vite 中，建议使用:deep()代替/deep/的方式