共计 2049 个字符，预计需要花费 6 分钟才能阅读完成。
问题形容
饿了么 UI 自带的款式有个别也够用，不过有时候咱们须要批改一下款式使其更加好看，本文记录一下批改 el-select 的款式的形式，记录一下，忘了的时候回来看看
问题剖析
下拉框能够分为两局部，一部分是‘框’局部，另外一部分是‘下拉’局部，平时咱们批改下拉框款式，无外乎就是批改这两个局部，如下图所示
批改框的宽度
批改框的宽度，最简略的形式就是给 el-select 加上一个 style 款式设置一下即可，留神间接应用 style 设置高度不会失效的，当然个别也不会去设置高度，因为高度是自适应的，会被内容撑开高度的
代码如下
<!-- 间接在这里加一个 style 即可 -->
<el-select style="width:400px;" v-model="value" placeholder="请抉择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>效果图如下
确实是变宽了
批改下拉的款式
形式一（index.html 中全局批改）
通过上图咱们能够看到，下拉框的款式，它并没有在 el-select 的 DOM 外面，而是放在了最外层，这个最外层和挂载 #App 是兄弟元素，所以咱们须要在 vue 我的项目的入口文件中 index.html 外面批改款式，
代码如下
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<style>
/* 在这里找到层级关系即可批改了 */
.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item:hover {background-color: #baf;}
</style>
</head>效果图如下
然而在 index.html 文件外面批改款式会造成全局款式净化，假如我只想把这个页面的下拉框的款式批改了，别的页面的下拉框款式不批改，这种形式显然不太好，当然如果是所有的下拉框都对立批改款式的话，这种形式倒是挺好的，加下来咱们说一下第二种形式，应用饿了么 UI 提供的 el-select 的属性
popper-append-to-body属性，官网介绍如下：
不言而喻，饿了么官网默认把 下拉 局部退出到 <body></body> 里，所以咱们能够通过这个属性使其不加到 body 里，让其回归到对应 el-select 外面，就是把 下拉 局部，放回对应构造中去。
形式二应用 popper-append-to-body 批改
<template>
<div>
<el-select v-model="value" :popper-append-to-body="false" placeholder="请抉择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>审查 DOM 元素构造
既然退出到 el-select 外面了，咱们就能够应用 css 选择器找到对应层级去设置对应款式了，仍然能够实现上图中的成果
<style lang="less" scoped>
.el-select {
.el-select-dropdown {
.el-scrollbar {
.el-select-dropdown__wrap {
.el-scrollbar__view {
.el-select-dropdown__item:hover {background-color: #baf;}
}
}
}
}
}
</style>补充
有网友说，popper-append-to-body 要搭配 popper-class 一块应用，其实并不一定须要搭配应用，只有让对应元素退出到 el-select 构造中去，就能够间接批改对应款式了。poper-class 的用法这样应用：<el-select v-model="value" popper-class="setSelect" :popper-append-to-body="false" placeholder="请抉择"></el-select>
popper-class 是给 select 下拉框的起的类名，搭配应用的话，会让 css 代码少写点