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

KedAyAyA

17年10月

https://forum.vuejs.org/t/elementui/19171/5

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

 

然后會把你scoped里的css編譯為 xxx[ data-v-4d856c52]

知道了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 這個也說明了這個問題 所以使用 >>> 符號可以做到這點
但是注意vue-loader的版本要高於12.2.0 這個功能是這個版本后才具有的
https://github.com/vuejs/vue-loader/releases/tag/v12.2.0 21

最后上一下測試的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>