element ui Multiple Select 抖动

TomvhL7l
  • 3
新手上路,请多包涵

35083907-463f03b2-fc5c-11e7-953f-dc2a2c6b0e95.gif

回复
阅读 6.4k
6 个回答
新林
  • 2
新手上路,请多包涵

我也遇到这个问题,想问有解决了吗

aaaaLuo
  • 2
新手上路,请多包涵

我也遇到这个问题,想问有解决了吗

user_OPcobCdq
  • 2
新手上路,请多包涵

我也遇到这个问题,想问有解决了吗

王杰
  • 2
新手上路,请多包涵

下拉组件的input height 会被选中的tag影响,没有看源码,猜测会有计算逻辑,在我的项目中,未改动前.el-tag--mini的height值为20,当tag到第二行后,撑开的input高度会在58、59来回跳动,导致抖动问题,最简单但不治根本的做法是改变.el-tag--mini高度,最佳的还是从elementUI源码角度解决
<style lang="scss" scoped>
.branch-list_content {
/deep/ .el-tag--mini {

height: 21px;

}
}
</style>

同遇到这个问题,查看源码后初步确认是resetHeight这个方法导致的,只不过没想到为何会计算出来的结果会不一样

resetInputHeight() {
        if (this.collapseTags && !this.filterable) return;
        this.$nextTick(() => {
          if (!this.$refs.reference) return;
          let inputChildNodes = this.$refs.reference.$el.childNodes;
          let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
          const tags = this.$refs.tags;
          const sizeInMap = this.initialInputHeight || 40;
          input.style.height = this.selected.length === 0
            ? sizeInMap + 'px'
            : Math.max(
              tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0,
              sizeInMap
            ) + 'px';
          if (this.visible && this.emptyText !== false) {
            this.broadcast('ElSelectDropdown', 'updatePopper');
          }
        });
      },

详见(github issue#20552): select 多选抖动 ⇲
相关 fixed ⇲

只需要给 el-tag 设置 margin 即可

.el-tag { margin: 1px }

问题应该是谷歌浏览器版本问题。

宣传栏