elementui の el-dialog コンポーネントと el-tabs を同時に使用してブラウザがスタックする問題を解決する

el-dialog ポップアップ ボックスで、el-tabs を使用してポップアップ ボックスの閉じるボタンをクリックすると、ポップアップ ボックスが閉じず、ブラウザがフリーズします。

環境は次のとおりです。

vue :2.6.10
elementui:2.15.3

解決：

el-talbsパネルには何も入れません。

<el-tab-pane label="贷款合同" name="0">内容</el-tab-pane>
改为：
<el-tab-pane label="贷款合同" name="0"> </el-tab-pane>

コンテンツを el-tabs の外側に配置し、v-show を使用して対応するコンテンツの表示を制御します。以下に示すように:

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="贷款合同" name="0"> </el-tab-pane>
    <el-tab-pane label="放款凭证" name="1"> </el-tab-pane>
    <el-tab-pane label="采购订单" name="2" :disabled="true">
    </el-tab-pane>
    <el-tab-pane label="订单发票" name="3" :disabled="true">
    </el-tab-pane>
</el-tabs>
<div v-show="activeName == 0">
    面板1的内容
</div>
<div v-show="activeName == 1">
    面板2的内容
</div>

この時点で、問題は解決されました。

最初は、el-form が el-tabs をネストできないためだと思いましたが、そうではありません。

Web フロントエンド開発、面接、またはフロントエンドの学習ルートで問題がある場合は、V: imqdcnn を追加してください。無料の Q&A で、長年業界に携わってきた技術専門家がバグの解決をお手伝いします。

優秀なWEBフロントエンド開発エンジニアになってください！