Element-ui select选择器样式修改

昨天犯了一个很低级的错误，差点影响到上线。警醒一下自己，太大意了，记录一下

众所周知，在vue2里面，如果不加scoped ，那么就会有可能影响到其他页面的样式。

而有一些样式又必须是在全局修改才能生效，就如elelment 的 select 下拉框。因为如果正常使用的话下拉框的样式是在页面外的，所以在本页面无法选中这个样式进行修改。

为解决这个问题，然后去看了element的官方文档。看到里面有这么一个属性

通过这个属性，我们可以将本来在外面的select选择框插入到本页面的body里面，这样我们就可以在scoped 里面对select进行修改了，并且不影响其他页面。非常奈斯。

以下是我的部分代码

// select 选择器
<el-select v-model="areaValue" placeholder="切换行政区域" :popper-append-to-body="false" @change="selectArea">
   <el-option
      v-for="item in arr"
      :key="item.id"
      :label="item.areaName"
      :value="item.areaName">
    </el-option>
</el-select>

//css
<style scoped lang="scss"> 
    .left-box {
        ::v-deep {
            .el-select-dropdown {
                border-color:  #6ED9FF;
                background-color: #051224;
            }
            .el-select .el-input.is-focus .el-input__inner {
                border-color:  #6ED9FF !important;    
            }
            .el-select-dropdown__item {
                color: #fff;
                border: 1px solid transparent;
            }
            .el-select-dropdown__item.hover {
                border: 1px solid #6ED9FF;
                background-color: transparent;
            }

            .el-popper[x-placement^="bottom"] .popper__arrow::after {
                top: 0;
                border-bottom-color: #6ed9ff;
            }
            .el-input__inner {
                color: #fff;
            }
        }
    }
</style>