elementUi——select选择框的下拉框样式调整

最近在用elementUI写后台管理系统,有个弹窗添加的功能,由于弹窗中的内容只有两项,而下拉框的高度较高,导致页面很空。

需要:将下拉框的高度调小,页面布局会好看。

调整前

在这里插入图片描述

调整后

在这里插入图片描述

实现

  1. 通过elementUi官网可以看到有个参数是可以设置下拉框的样式的
    在这里插入图片描述
  2. 实现方式
<el-select v-model="form.supplierId" placeholder="请选择" v-if="!form.id" @change="changeVal" size="mini" filterable popper-class="selectCls"
                          style="width:250px;"
                          :popper-append-to-body="false" clearable>
                   <el-option v-for="item in supplierList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id*1">
                   </el-option>
               </el-select>
  1. 给下拉框添加样式
.selectCls {
   max-height:200px;
}

只设置上面的几项,效果是不能完全实现的,通过控制台查看元素,发现还需要给下拉框样式里面的元素进行样式设置。
4. 给下拉框内层元素添加样式

.selectCls .el-scrollbar {
    max-height: 200px;
}

完成!!!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐