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>

質問：

element-ui-plus の el-select-v2 を使用すると、選択が完了した後も選択が
foucs の状態のままであることがわかりました。フォーカスの状態は、API から直接削除することはできません。

図のように常に合焦状態です。

解決

調査と調査の結果、この問題を解決するには、select の無効な属性を設定できることがわかりました。選択したら、visibleChange イベントをリッスンし、最初にドロップダウン ボックスの状態を
無効状態に変更してから、遅延を設定して無効状態をキャンセルします。
スタイルに問題がある場合は、無効状態を無効に変更できます。
具体的な解決策は次のとおりです
。

<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>

上記の方法により、焦点状態の問題を解決することができる。