首先添加了 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>
来源: http://www.bubuko.com/infodetail-2770140.html