vue-element-ui的弹出框与#app同级,以下为各种弹出框样式修改方式:
1、组件中存在popper-append-to-body属性
1、组件中存在popper-append-to-body属性,例如select选择器等
直接在引用该组件的.vue文件中修改弹出框样式,使用popper-append-to-body属性,然后使用 ‘/deep/’ 修改样式
找到所需修改的样式修改即可
<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
...
<style scoped lang="less">
/deep/ .el-select-dropdown__list{
//修改样式
}
</style>
2、使用popper-class属性修改弹出框样式
2、使用popper-class属性修改弹出框样式,例如:Select选择器、cascader级联选择器、时间日期选择器等
不加scoped,即在全局样式中添加,容易影响全局样式
<el-tooltip content="Top center" placement="top" popper-class="pop-class">
<el-button>Dark</el-button>
</el-tooltip>
...
<style lang="less">
//tooltip弹出框
.pop-class{
line-height: 0px !important;
height: 21.67px !important;
background: #F25E39 !important;
.popper__arrow{
display: block !important;
}
.popper__arrow::after{
border-top-color: #F25E39 !important;
}
}
</style>
3、组件不存在popper-append-to-body属性和popper-class属性(例如el-table中的筛选弹出框),或不想影响全局样式
3、组件不存在popper-append-to-body属性和popper-class属性(例如el-table中的筛选弹出框),或不想影响全局样式
为包含该组件的div添加类名,
当#app的子元素存在.purchasing元素时,修改#app兄弟元素 .el-select-dropdown__list 的样式
<div class="purchasing">
<el-table
ref="filterTable"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
sortable
width="180"
column-key="date"
:filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
:filter-method="filterHandler"
>
</el-table-column>
</el-table>
</div>
...
<style lang="less">
#app:has(.purchasing) ~ .el-select-dropdown__list{
//修改样式
}
</style>