element ui Multiple Select 抖动

Question

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

下拉组件的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>

Answer 5

同遇到这个问题，查看源码后初步确认是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');
          }
        });
      },

Answer 6

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

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

.el-tag { margin: 1px }

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