关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析

• 在编写表格的时候想给表头添加样式，使用 header-cell-class-name怎么都添加不上样式，检查元素发现连class都没添加上，查了很多资料有人说element之前版本不支持这属性，但我使用的并不是之前的版本啊，有人说是添加scoped的原因，去掉之后确实可以了，但我还是想添加scoped, 所以我修改之后是：

  <style lang="stylus" scoped>
      .el-table
          >>> .headerColor
              background red
  </style>
  <script>
  export default {
    methods: {
        headerStyle ({row, rowIndex}) {
          return 'headerColor';
       }
    }
  };
  
  </script>
  

  　　我发现这样确实可以, 这里我们先看一下为什么无法修改样式，elementUI的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式），因为elementUI样式作用于全局，scoped是局部样式。所以我们修改时1.可以增加权重，覆盖掉全局样式。2.就是使用scoped，我们希望样式作用的够深，例如影响到子组件,scoped网上有很多描述的；

转载于:https://www.cnblogs.com/dwenz/p/10231868.html