elementUI multiple 下拉框抖动

最新推荐文章于 2024-02-28 11:16:33 发布

前端小白学习中....

最新推荐文章于 2024-02-28 11:16:33 发布

阅读量1.1k

点赞数

分类专栏： elementUI 文章标签： elementui 前端

本文链接：https://blog.csdn.net/weixin_43305450/article/details/125997401

版权

elementUI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在谷歌浏览器或者Edge浏览器下 elementUI 多选下拉框在不同分辨率下缩放浏览器的分辨率会出现抖动的问题.

解决方案:

(1)下拉框设置class以及style:width:100% 不然会影响下拉框样式

<el-select class="multiple_sel" @change="getCurrentFreight(scope.row)" v-model="scope.row.suppliedDcArr" multiple :disabled="!canUpdate || scope.row.transportaionMethod == 'SUPPLIER'" style="width:100%">
    <el-option :key="index" v-for="(item,index) in suppliedDcList" :label="item.dcName" :value="item.tmDcId+''"></el-option>
</el-select>

.multiple_sel{
  position: relative;
  .el-select__tags {
    position: inherit;
    transform: translateY(0);
    padding: 3px 0;
    min-height: 28px;
  }
  .el-select__tags ~ .el-input {
    min-width: 100%;//必须设置宽度 不然会有样式问题
    height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    .el-input__inner {
      min-height: 20px;
      height: 100% !important;
    }
  }
  .el-select__input.is-mini {
    min-height: 20px;
  }
}

但这个如果缩放浏览器分辨率太小,还是会有问题,如果有好的解决方案,敬请评论区分享,谢谢~