Vue问题汇总

21 阅读1分钟
  • el-select
<el-select v-model="selectedItem" value-key="id" placeholder="selectedItem.name" 
                :suffix-icon="icondownarrow"
                popper-class="eloption"
                :teleported="false"
                :popper-append-to-body="false"
                >
                <el-option
                    v-for="item in selectItems"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                    class="dicate_normal_option"
                />
                </el-select>
  1. 调整下拉框高度
popper-class="eloption"//这个需要设置
:teleported="false"//这个truefalse都可以
:popper-append-to-body="false"//这个truefalse都可以
.eloption .el-select-dropdown__wrap {
      min-height: 320px;//这个需要设置一个,如果项目做了适配,框架计算出来的尺寸可能不对,然后造成显示不全
      max-height: 450px;//这个也可以设置
}
  1. 去掉input线框和背景
.el-select .el-input {
    font-size: 36px;
    height: 70px;
    width: 180px;
}
 .el-select .el-input__wrapper {
    box-shadow: none !important;
    background: transparent;
} 
/* 去除选中时蓝色边框(下面两个都要加上) */
.el-input .el-input__wrapper.is-focus {
    box-shadow: none !important;
}
 
.el-select .el-input.is-focus .el-input__wrapper {
    border-color: #DCDFE6 !important;
    box-shadow: none !important;
}
.el-select .el-input__inner{
    background-color:transparent ;
    color:#333;
    border:0px;
    text-align: end;
    height: 70px;
    font-size: 36px;
    border-radius:0px;
 }