効果を実感してください:
説明書：
序文：
質問:
1. #app にまったくマウントされていないため、詳細な変更スタイルは使用できません。機能しません (変更は役に立ちません) 2.
スタイルを変更するには、グローバルの Index.vue を使用します (グローバル ファイルを汚染します) 3.公式
ドキュメントとすべての Baidu ソリューションでは、popper-append-to-body が使用されています (ただし、破棄されました)
4. 9981 回の困難を経て、最終的にドロップダウン ボックスのスタイルをカスタマイズおよび変更できるようになりました。 (私のような友達と共有するのが待ちきれません)
具体的なコード:
<el-form-item label="统计频度" >
<el-select v-model="value" placeholder="请选择" popper-class="selectStyle" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
この属性を追加する
popper-classだけです
data() {
return {
//下拉框数据
options: [
{
value: "选项1",
label: "年度",
},
{
value: "选项2",
label: "季度",
},
{
value: "选项3",
label: "月度",
},
],
value: ""
};
},
覚えて！集中するには黒板をノックしてください！style タグを単独で記述する場合 (それ以外の場合は効果がありません)
//下拉框标题文本label
::v-deep .el-form-item__label{
color: #fff;
font-weight: 100;
}
//选择框
::v-deep .el-input__wrapper{
background-color: rgba(26, 84, 128,0.5);
width:130px;
}
//下拉框文字
/deep/ .el-input__inner{
color:#e1dcdc;
}
//下拉框背景色
.el-popper.is-light.selectStyle {
background-color: rgba(0, 136, 255, 0.1) !important;
border: 1px solid #254277 !important;
}
//下拉框的链接小方块
.selectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
background: rgba(0, 136, 255, 0.1) !important;
border: 1px solid #254277 !important;
}
.selectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
background: #254277 !important;
border: 1px solid #254277 !important;
}
//鼠标移动上去的选中色
.selectStyle {
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #2A77C6 !important;
}
//下拉框的文本颜色
.el-select-dropdown__item {
color: #B3BCCE !important;
}
//选中之后的颜色
.el-select-dropdown__item.selected {
background: #2A77C6 !important;
}
}
私と同じように憂鬱な人たちの助けになれば幸いです!
参考（ドロップダウンボックスの枠線のスタイルが私より 1 つ多い）: https://blog.csdn.net/qq_52721978/article/details/127493256