修改element ui 默认样式最好的解释

首先添加了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>