首先添加了scoped的style標簽會在vue-loader裏進行處理
所謂的局部css 就是在你當前組件裏的所有html標簽打一個data-tag
例如

知道了scoped的作用，來看看為什麽我們不能修改el-table裏的樣式

如果你修改樣式你一定會這麽寫css .table th {xxx:xxx}
那麽scoped默認會在最後一層加一個tag 也就是編譯成.table th[ data-v-4d856c52]
{xxx:xxx}

而elemetui table組件是你的一個子組件 對於子組件只給子組件的根元素打上父組件的tag 也就是你可以在table組件的根元素中看到這個tag 但是th這個標簽並沒有tag 所以依舊是找不到匹配 自然也就無法加上樣式

那麽這樣做對嗎？
答案肯定是對的，因為父組件當然要只管理自己的樣式 子組件管理自己的樣式 在父組件裏修改子組件的樣式本來就是不太合理的 也會造成父子組件的耦合度增高

道理都懂了 看你的需求是要特殊修改一下某些table而不是整體重構樣式
那麽根據問題的原理出發，我們認為只要能把data-tag作用於.el-table根元素就可以覆蓋樣式了

https://vue-loader.vuejs.org/en/features/scoped-css.html 59

最後上一下測試的demo

<template>
  <div>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
          prop="date"
          label
 
="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      </el-table>
      <div>
          <span>123</span>
          <p>321</p>
          <p>321</p>
      </div>

      </div>

    </template>
  <script>
  export default {
      data() {
      return {
          tableData: [{
          date: ‘2016-05-02‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀區金沙江路 1518 弄‘
          }, {
          date: ‘2016-05-04‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀區金沙江路 1517 弄‘
          }, {
          date: ‘2016-05-01‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀區金沙江路 1519 弄‘
          }, {
          date: ‘2016-05-03‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀區金沙江路 1516 弄‘
          }]
      }
      }
  }
  </script>
  <style lang="css" scoped>
      .el-table >>> th {
          background-color: #eee;
      }
  </style>

修改element ui 默認樣式最好的解釋