vue-element-ui的各种弹出框样式修改

vue-element-ui的弹出框与#app同级，以下为各种弹出框样式修改方式：

1、组件中存在popper-append-to-body属性

1、组件中存在popper-append-to-body属性，例如select选择器等
直接在引用该组件的.vue文件中修改弹出框样式，使用popper-append-to-body属性，然后使用 ‘/deep/’ 修改样式

找到所需修改的样式修改即可

<el-selectv-model="value"placeholder="请选择":popper-append-to-body="false"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
  ...
<stylescopedlang="less">/deep/ .el-select-dropdown__list{
    //修改样式
}</style>

2、使用popper-class属性修改弹出框样式

2、使用popper-class属性修改弹出框样式，例如：Select选择器、cascader级联选择器、时间日期选择器等
不加scoped，即在全局样式中添加，容易影响全局样式

<el-tooltipcontent="Top center"placement="top"popper-class="pop-class"><el-button>Dark</el-button></el-tooltip>
  ...
  <stylelang="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 的样式

<divclass="purchasing"><el-tableref="filterTable":data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"sortablewidth="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>
...
<stylelang="less">#app:has(.purchasing) ~ .el-select-dropdown__list{
        //修改样式
    }</style>