vue 方法里面修改样式_浅谈vue中style的scoped属性（修改特定Element组件样式的方法）...

在单页.vue文件中，为了保证各组件间的css样式不冲突，很可能会使用到局部css，也就是给

一开始用的时候感觉很神奇，于是看代码查资料了解了一下原理。

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css。

原理都懂了，再有兴趣深究可以看一下vue-loader的源码。

下面说一个自己在开发中遇到的问题

最近项目中也在使用element-ui进行开发，有时候需要对引入的组件进行一些样式的重写调整，但仅仅是针对某一个页面而不是整体修改，在当前组件中用局部属性导致了不能重写element-ui的样式的问题。

下面是简单的例子，想修改.el-table th的样式

.el-table th {

background-color: #eee;

}

但是发现并不能正常的修改样式，于是通过chrome查看元素一探究竟

发现html中只有子组件的根元素被打了tag标签而编译后的css中是最后一个属性被加了tag标签，所以自然就定位不到元素修改他的样式了

...

.el-table th[data-v-15ed03ea] {

background-color: #eee;

}

既然问题的原理已经清楚了，那么接下来开始寻找解决方案，我们的目的只需要将tag打给我们要修改子组件样式的根元素就可以了

最后上一下测试的demo

:data="tableData"

style="width: 100%">

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

prop="address"

label="地址">

123

321

321

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 弄'

}]

}

}

}

.el-table >>> th {

background-color: #eee;

}