Vue在当前页面修改element组件的默认样式

在vue页面使用element框架的组件时，有时只需要修改当前页面组件的样式，不需要修改全部，所以不能通过修改框架的源代码实现

1、在vue页面使用element元素，通过浏览器控制台可以找到对应想要修改的标签的class类

一般可以找到想要修改的标签的上级元素class，用来限制选择。如想要修改如图的class为cell的标签，可以通过.el-table .cell来选择

2、在当前vue页面下的style中，使用 /deep/ 或者 >>> 进行样式穿透

如果样式被覆盖可以使用!important来加权

.el-table /deep/ .cell {
    display: flex !important;
    justify-content: center;
    padding-right: 10px !important;
}

.el-table >>> .cell {
    display: flex !important;
    justify-content: center;
    padding-right: 10px !important;
}

这样添加的样式只会在当前页面改变该组件的样式，而不会影响其他页面的组件的样式。