elementui el-select 多选换行出现空白行的问

问题描述

如下图所示，在el-select 整体的宽度不够的时候，input_inner 就会换行导致其出现空行的问题

解决思路

参考文章： https://it.cha138.com/jingpin/show-1241132.html，https://blog.csdn.net/Weiqian_/article/details/130107339

1. 想通过 focus 和 blur 的时候设置input的显隐
2. 通过 css 让 input 换行

解决方法

经过实践(一番测试, 头秃的过程)，可以查看下 elementui el-select的源码，位置如下图：

实现代码如下（自行理解吧）：

mounted() {
    if (this.$refs.elSelect) {
      const elSelect = this.$refs.elSelect
      if (elSelect) {
        const inputInner = elSelect.$refs.input
        inputInner.style.height = '0'
        elSelect.resetInputHeight()
        inputInner.addEventListener('blur', () => {
          inputInner.style.height = '0'
          elSelect.resetInputHeight()
        })
      }
    }
  }

  // el-select 的 focus 事件
  private focus() {
    if (this.$refs.elSelect) {
      const elSelect = this.$refs.elSelect
      if (elSelect) {
        const inputInner = elSelect.$refs.input
        inputInner.style.height = 'auto'
        elSelect.resetInputHeight()
      }
    }
  }