解决使用element-plus时使用el-select-v2组件时，选中后无法移除focus的状态的方法。_element-plus el-select-v2

我们可以使用element-ui-plus的el-select-v2的组件，实现复合搜索和下拉框的功能。
使用如下模块：

        <template>
            <el-select-v2 v-model="value" filterable :options="options" placeholder="Please select"
                @visibleChange="removeSelectFocus" style="width: 240px" :disabled="state.selectStatus ? false : true">
                <!-- 
                    filterable  是否可筛选	
                    options  要渲染的数据内容。
                    @visibleChange  下拉框出现/隐藏时触发  val 出现则为 true，隐藏则为 false
                 -->
                <template #default="{ item }">
                    <span>{{ item.label }}</span>
                    <span>
                        {{ item.value }}
                    </span>
                </template>
            </el-select-v2>
        </template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

问题：

在使用element-ui-plus的el-select-v2时候，我们发现选中完成之后，该select还处于
foucs的状态。无法通过api直接移除focus的状态。

如图所示，一直为focus状态。

解决方法

通过研究调查发现，我们可以设置select的disabled属性来解决该问题。当我们选中后，监听visibleChange事件，先把下拉框
的状态改为disabled状态，再设置延迟把disabled状态取消掉，即可。
出现的样式问题，我们可以把disabled的禁用状态进行改变。
具体解决方法如下所示：
jsFunction:

<script>
    let state = {
        selectStatus: true
    }

    const removeSelectFocus = (val) => {
        if (!val) {
            state.selectStatus = false;  //先设置为禁用状态
            setTimeout(() => {
                state.selectStatus = true;  //解决禁用状态
            }, 50);
            getUniversityRequest();
        }
    }
</script>
<style lang='less'>
    /deep/ .el-select-v2__wrapper.is-disabled {
        background: none;
        cursor: pointer;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

通过以上方法就可以解决focus状态的问题了。