使用vue深度选择器修改ElementUI组件内样式的示例代码
喵酱爱吃鱼 人气:0例子：el-collapse标签修改子组件样式
在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。
<style lang="scss" scoped>
.collapse1 {
/deep/ .el-collapse-item__content {
padding: 0px 5%;
background: #fff;
}
/deep/ .el-collapse-item__header {
padding: 0px 5%;
background: #fff;
}
}
</style>scss使用：
<style lang="scss" scoped>
.collapse1 {
::v-deep .el-collapse-item__content {
padding: 0px 5%;
background: #fff;
}
::v-deep .el-collapse-item__header {
padding: 0px 5%;
background: #fff;
}
}
</style>注意：在vue中，>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
<-- 放上去就行了 -->
<el-collapse class="collapse1" v-model="...">
<el-collapse-item v-for="(item,index) in ..." :name="index">
<template slot="title">
{{ item.... }}{{ index }}
</template>
</el-collapse-item>
</el-collapse>注：el-collapse-item__header等类名在浏览器开发者工具中的Elements找到
vue使用element ui
第一步：
npm install element-ui --save
第二步：
主要代码（安装完成后在 main.js 添加全局引用）：
import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI);
第三步：
element ui官网找组件引用。
加载全部内容