關於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網上有很多描述的；