修改element表格和标签页表头样式

背景：

由于业务要求，需要更改element表格样式进行美化.

需求：

1. 修改表格中表头和内容的样式
2. 修改标签页表头样式

解决一：使用js进行样式的修改

例：通过js获取对应的样式名进行样式的修改

document.getElementsByClassName('el-tabs__content')[0].style.display = 'block'

解决二：直接在全局样式中进行样式修改

例： 在不带 scoped 的 style 中进行修改，这种方式不推荐使用，因为全局修改了样式势必会影响到其它页面，届时会造成样式冲突，界面布局混乱。

<style lang="scss">
	.el-tabs__content {
	  display: none;
	}
</style>

解决三：使用深度选择器 >>> 进行样式修改

例：需修改 el-tabs 标签下的 el-tabs__header 标签的样式，但由于是组件封装的我们无法直接获取到 thead 标签，故使用深度选择器进行样式修改。

// 修改标签页表头样式
  .el-tabs >>> .el-tabs__header{
    margin-bottom: 5px;
  }
 // 修改表格表头样式
  .el-table >>> th {
    height: 35px;
    line-height: 35px;
  }

你学废了吗？