element-ui select点击下拉失效？怎么解决

前言：最近解决了个bug，记录下来，提供一个思路。大概就是element-ui里面的form表单，在表单的label插槽放上select组件，点击select输入框是可以展开下拉的，但是点击下拉那个icon时，下拉框是没响应的

大概结构是这样的：

上代码：

<el-form-item label=" " label-width="120px">
    <div slot="label">
      <el-select style="width:120px" @change="changeSearchType" v-model="searchType" filterable  placeholder="全部">
        <el-option v-for="item in searchTypeList" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
    </div>
    <div class="">
      <el-input v-if="searchType== searchTypeList[0]" style="width:240px" v-model="queryParams.parentAsin" @keyup.enter.native="onSearch" clearable placeholder="请输入内容检索" class="search_item_w" type="text"></el-input>
      <el-input v-else-if="searchType== searchTypeList[1]" style="width:240px" v-model="queryParams.childAsin" @keyup.enter.native="onSearch" clearable placeholder="请输入内容检索" class="search_item_w" type="text"></el-input>
    </div>
</el-form-item>

第一次尝试： 既然没有效果，那就手动处理，查看element-ui文档，采用了select提供的focus方法，通过这个方法，手动设置聚焦时展开下拉框

<el-select style="width:120px" ref="selectRef" @focus="() => this.$refs.selectRef.toggleMenu()" @change="changeSearchType" v-model="searchType" filterable  placeholder="全部">
    <el-option v-for="item in searchTypeList" :key="item" :label="item" :value="item">
    </el-option>
</el-select>

这样子确实是可以通过点击select的下拉箭头可以打开下拉框，但是，有个bug，就是点击select的输入框的时候，会闪一下，也就是在聚焦的时候。

第二次尝试： 直接操作visible

<el-select style="width:120px" ref="selectRef" @focus="() => this.$refs.selectRef.visible = !this.$refs.selectRef.visible" @change="changeSearchType" v-model="searchType" filterable  placeholder="全部">
    <el-option v-for="item in searchTypeList" :key="item" :label="item" :value="item">
    </el-option>
</el-select>

这样子确实不会闪了，但是引发了另一个问题，就是点击select输入框，第一次没响应，是form item聚焦了，要双击才可以打开下拉框

经过上两次尝试，我开始逐步分析，对form item的lebel聚焦是不是跟select 下拉箭头点击冲突了。

<el-select style="width:120px" ref="selectRef" @click.native="onClick" @change="changeSearchType" v-model="searchType" filterable  placeholder="全部">
    <el-option v-for="item in searchTypeList" :key="item" :label="item" :value="item">
    </el-option>
</el-select>

onClick() {
    console.log("测试")
}

然后，我发现点击下拉箭头的时候是打印了两次，而点击输入框却是一次。所以才会出现点击select输入框时，是可以正常使用，而点击下拉icon时，是没有响应的，因为执行了两次。

那就围绕着解决这执行两次的问题就可以完美解决啦。

那就思考阻止事件的传递？是JS的阻止事件冒泡或者捕获？还是直接阻止默认事件的stopProgration？

当然阻止事件冒泡或者捕获还是stopProgration可能实现，但是我觉得会很复杂。那就直接考虑CSS

没错，CSS也可以阻止事件。直接定位到该元素身上，也就是下拉的那个icon

直接将这个pointer-event: all改为none就完美解决了。

总结：事情本来就不复杂，思路很重要