In everyday coding, if you want to change the style of a third party plug-in on a page but not on other pages, you can use the depth selector /deep/ in a Vue project when you cannot change the style of a child component after using scoped in the parent component

## If you have the following template

<div class="PageteamList"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label=" date" width="180"> </el-table-column> <el-table-column prop="name" label=" name" Width ="180"> </el-table-column> <el-table-column prop="address" label=" address" > </el-table-column> </el-table> </div>Copy the code

CSS uses /deep/ and “<<<“

/ deep/principle?

When compiling a component, if there is a scoped attribute on the style tag of the current component, a data-V-hash attribute will be added to all tags of the current component, and the same field will be added to the end of the CSS selector of the tag, which will achieve a unique function similar to “scope”. This makes styles within the current component apply only to elements within the current component

The CSS style is

<style scoped>
.PageteamList >>> .el-table__row {
  line-height:50px;
  background:red;
}

</style>
Copy the code

You can change the style in the EL-Table and other third-party components