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>
 

修改element ui 默认样式最好的解释的更多相关文章

  1. vue加scoped后无法修改样式(无法修改element UI 样式)

    有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...

  2. 覆盖element ui 的样式

    我们可以使用 !important  来覆盖element ui 的样式 首先先在浏览器中找到 我们所要修改的样式 ,然后找到她的 class  重新写他的样式 ,例如 . app  { width ...

  3. vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

    在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...

  4. react中修改antd的默认样式

    最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添 ...

  5. 修改select的默认样式

    在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式 去掉select的边框和点击时的蓝色边框 select{border: none;outline: non ...

  6. vue修改Element的el-table样式

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. ...

  7. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  8. css3修改浏览器scroll默认样式

    最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...

  9. 修改easyui panel 默认样式

    有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就 ...

随机推荐

  1. 测试 ClownFish、CYQ、Entity Framework、Moon、MySoft、NHibernate、PDF、XCode数据访问组件性能

    下期预告: 由于很多园友反馈,有的组件不应该缺席.测试复杂度不够.测试还缺乏一定的公平. 因此考虑在下一个版本中,确保在更加公平的前提下进行更高复杂度的测试 . 同时将分为2组测试,纯SQL组件及纯O ...

  2. IOS低版本遇到了坑不知道你遇到了没

    拿着项目给客户测试,客户那边三个人俩人水果手机是ios8以下版本,结果导致```(恭喜,坑出现!)总不能说老总!"您把版本升级到ios9 吧!

  3. jQuery 基础(4)jQuery 尺寸

    jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()jQu ...

  4. Spark学习笔记(一)

    1.调度 分为FIFO和FAIR两种模式 创建调度池:sc.setLocalProperty("spark.scheduler.pool", "pool6") ...

  5. 【Netty学习】Netty 4.0.x版本和Flex 4.6配合

    笔者的男装网店:http://shop101289731.taobao.com .冬装,在寒冷的冬季温暖你.新品上市,环境选购 =================================不华丽 ...

  6. MonoDevelop with Visual Studio to Linux and Mac OSX maintaining a single code base for all platforms.

    Home | Screenshots | Download | Contact | FAQ | Documentation | Development | Search   MonoDevelop i ...

  7. Class类对象的三种实例化方法

    class X { } public class GetClassDemo01 {     public static void main(String[] args) {         X x = ...

  8. C#程序读取MAC地址的五种方法(转)

    public class GetMac { ///<summary> /// 根据截取ipconfig /all命令的输出流获取网卡Mac ///</summary> ///& ...

  9. python第十二天, 三元表达式, 函数对象,名称空间与作用域,函数的嵌套定义

    复习 1. 字符串的比较: 2. 函数的参数:形参与实参 3. 实参的分类:位置实参与关键字实参 4. 形参分类: 1.无值位置形参 2.有值位置形参 3.可变长位置形参 4.有无值关键字形参 5.可 ...

  10. Kafka学习之二 Kafka安装和使用

    部署环境Linux(Centos 6.5),JDK 1.8.0,zookeeper-3.4.12,kafka_2.11-2.0.0. 1. 单机环境     官方建议使用JDK 1.8版本,因此本文使 ...