basic usage
- the code
<el-select v-model="valueStyle" clearable placeholder="作业类型">
<el-option
v-for="item in optionsStyle"
:key="item.WorkType"
:label="item.WorkType"
:value="item.WorkType">
</el-option>
</el-select>
- Code Interpretation
v-model is to bind a value, clearable indicates that the input can be cleared, placeholder is the placeholder text, and el-optoon is the option box - Effect
Basic interpretation of components
Set the selection box style
- Set input box width, height and color
::v-deep .el-select {
width:20%;
margin-right: 20px;
.el-input {
input {
height: 30px;
background-color: transparent;
box-shadow: 1px 1px 5px 1px RGB(128,255,255,0.8) inset;
border-color:#80ffff;
color: #fff;
}
}
}
As a result, it is found that the small icon is too high, and the line height of the small icon needs to be changed
- Change small icon row height
::v-deep .el-select {
width:20%;
margin-right: 20px;
.el-input {
input {
height: 30px;
background-color: transparent;
box-shadow: 1px 1px 5px 1px RGB(128,255,255,0.8) inset;
border-color:#80ffff;
color: #fff;
}
.el-input__icon{
line-height: 30px;
}
}
}
Effect
Set the drop-down box style
I can't change the style
because the drop-down box is not in div#app, so changing the style has no effect on it. First mount the drop-down box inside. Add: popper-append-to-body="false"
<el-select :popper-append-to-body="false" v-model="valueStyle" clearable placeholder="作业类型">
<el-option
v-for="item in optionsStyle"
:key="item.WorkType"
:label="item.WorkType"
:value="item.WorkType">
</el-option>
</el-select>
change style
/**修改边框和字体颜色 */
::v-deep .el-select {
width:20%;
margin-right: 20px;
.el-input {
input {
height: 30px;
background-color: transparent;
box-shadow: 1px 1px 5px 1px RGB(128,255,255,0.8) inset;
border-color:#80ffff;
color: #fff;
}
.el-input__icon{
line-height: 30px;
}
}
.el-select-dropdown {
//下拉框
background: #002450;
border: 1px solid #1384b4;
.el-select-dropdown__item {
//下拉框选项文字颜色
color: #ffffff;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
//下拉框选项鼠标悬浮背景颜色
background-color: #00387C;
}
}
}
effect
you're done