修改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=" 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>