el-select 可过滤状态点击最右arrow icon可收起

el-select 可过滤状态点击最右arrow icon可收起

公司测试又在折磨人，el-select组件在设置了filterable 属性的情况下点击右边的icon位置，下拉是收不回来的，只能点击可输入框和组件外其他区域才可以，bug就来了

单纯只是filterable 很好解决，直接css：

/**
* 下拉框图标点击可收起
*/
.el-select{
  .el-input__inner{
    position: relative;
    z-index: 10;
    background: transparent;
  }
  .el-input__suffix{
    z-index: 5;
  }
  .el-select__tags + .el-input .el-input__inner {
    position: static;
  }
}

其实就是将里面可输入的框层级加大了，让它覆盖在了icon上面

然后再配置了 multiple 属性的组件使用这样的方法是没用的，而且还会导致里面的tag 清除按钮被盖住无法点击, 我这里是配置了很多的搜索框，循环出来的，注意判别

<el-form-item  v-for="item in enabledOption" :key="item.key.toString" :label="item.name">
	<div class="select-box" v-if="item.multiple && item.filterable">
    <span @click="prefixClick(item)" class="handle-pre"></span>
    <el-select filterable v-model="formInline[item.key]" :placeholder="`请选择${item.name}`" multiple collapse-tags :ref="selectDom" @visible-change="selectVisibleChange(item,$event)">
      <el-option
        v-for="(i,k) option" :key="k" :label="i" :value="k">
      </el-option>
    </el-select>
    </div>
</el-form-item>

    const selectRef = ref([])
    const selectDom = (el) => {
      selectRef.value.push(el)
    }
    
    const enable = computed(() => {
      return props.enabledOption.filter(item => item.type === 'select' && item.multiple && item.filterable)
    })
    
    const methods = {
      prefixClick (item) {
        const i = enable.value.indexOf(item)
        data.isFocus[i] = !data.isFocus[i]
        if (data.isFocus[i]) {
          selectRef.value[i].focus()
        } else {
          selectRef.value[i].blur()
        }
      },
      selectVisibleChange (item, boo) {
        const i = enable.value.indexOf(item)
        setTimeout(() => {
          data.isFocus[i] = boo
        }, 0)
      }
    }
    

解决 !