解决调整el-options样式不生效

问题分析：

当选中el-select的选项时页面的结构，选项的容器并不在挂载的div#app中，而是div#app的兄弟元素，我们在组件中设置样式的时候，加上了scoped，作用域都是局限在div#app中，所以设置的样式就无法正常作用到选项内容的div上。

注：el-select组件中，只有选项的容器默认是div#app之外的，展示的div.el-input还是在div#app之中。

问题解决：

Popper-append-to-body属性是Element-UI官方文档中提供的一个属性，该属性的用途就是将el-select选项的内容移动div#app当中，默认值是true，下面是将该属性设置为false时的DOM结构展示。

<el-select v-model="data" :popper-append-to-body="false" clearable no-data-text="数据为空显示此处信息">
    <el-option v-for="(item,idx) in datalist" :value="item.value" :label="item.label" :key="idx" >
        <span style="float: left">{{ item.value}}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label}}</span>
    </el-option>
</el-select>

设置完成后就可以用 /deep/ 去修改样式了

今天你学废了么