vue+element-ui，判断条件都满足的情况下，为什么只弹出来一个弹框

vue+element-ui，设置两个相同弹框，判断条件都满足的情况下，为什么只弹出来一个弹框？
页面

代码

可以使用element-ui里面的 Message 消息提示

源于chatGPT仅供参考
根据您提供的代码片段，可能有几个原因导致只弹出一个弹框：

条件判断中的逻辑错误：在您的代码中，条件判断的语法似乎有一些问题。请确保您的条件判断语句正确，并且每个分支都能被执行到。
调用弹框方法的问题：根据您的代码，使用了this.$modal.msgwarning和this.$modal.confirm来展示弹框。请确保这两个方法正常工作，并且能够在条件满足时正确调用。
异步操作导致的问题：如果getIndexInfo()是一个异步操作，并且您在其回调函数中进行了条件判断和弹框显示，那么可能只有最后一个满足条件的弹框会被显示。这是因为异步操作的回调函数会在所有异步操作完成后才执行，所以只有最后一个回调函数中的弹框会被显示出来。

为了更好地理解您的问题并提供具体的解决方案，请提供更完整的代码或更详细的说明。特别是涉及到条件判断和弹框显示的部分。

在使用 Element UI 的 MessageBox 时，如果同时触发两个弹窗时，只会打开一个弹窗的原因可能是因为 MessageBox 是通过单例模式实现的。每次调用 MessageBox 都会使用同一个实例进行处理，因此也只会显示一个弹窗
如果你需要同时打开多个弹窗，可以通过以下两种方法来实现：
1.自定义组件
你可以自行编写弹窗组件，并在需要弹出弹窗的地方分别引入和使用该组件。这样就能够同时打开多个弹窗了。
2.手动管理实例
如果你一定要使用 MessageBox 来实现多个弹窗，那么你可以手动管理弹窗的实例。具体实现方法如下：

import { MessageBox } from 'element-ui';

// 定义一个空数组来存储弹窗实例
const messageBoxes = [];

// 手动打开弹窗并将其实例添加到数组中
const messageBox1 = MessageBox.alert('这是弹窗1', '标题1');
messageBoxes.push(messageBox1);

// 手动打开另一个弹窗并将其实例添加到数组中
const messageBox2 = MessageBox.alert('这是弹窗2', '标题2');
messageBoxes.push(messageBox2);

// 关闭所有弹窗
messageBoxes.forEach((item) => {
  item.close();
});

值得注意的是，这种方法需要手动管理弹窗实例，可以通过数组的方式来存储每个弹窗实例，并在需要关闭所有弹窗时通过遍历数组来关闭每个弹窗。

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7643138
这篇博客你也可以参考下：vue使用element-ui，页面刷新，导航栏跳转问题（解决）
除此之外, 这篇博客: vue+element-ui实现表格中的删除按钮加载动画中的 vue+element-ui实现表格中的删除按钮加载动画 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

背景：

在同事的项目中有这样的一个要求：
就在在表格中的操作栏有一个删除按钮，点击的时候加载loading的动画，加载完毕后loading动画停止。
同事开始的时候是全局定义一个isLoading的变量来控制，
结果发现每点击一个删除按钮，就会导致所有的按钮加载loading动画。
真棒！bug又出现了，琢磨了代码一番，于是有了一下的方案！

思路
导致bug的原因是因为共用这个全局的变量，既然全局不行，那么我们就可以从每一行来控制
1.放弃data里定义一个isLoading
2.在拿到整个表格的数据之后，做一番处理，就是每遍历一个item对象，就往其中加入一个isLoading的属性，并赋值为false
3.在点击删除的时候就给row.isLoading赋值为true,等删除成功后设置为row.isLoading=false.
4.通过以上步骤即可实现删除按钮的loading动画

代码实现

html部分

<el-table :data="tableData" style="width: 100%" border>
  <el-table-column label="日期" width="180">
        <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
    </el-table-column>
    <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
            </el-popover>
        </template>
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" :loading="scope.row.isLoading" type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

javascript部分

var vm = new Vue({
  el: "#app",
    data: {
        tableData: []
    },
    mounted() {
        this.handleFormat()
    },
    methods: {
        async handleFormat() {
            const {
                data
            } = await axios.get('./data.json');
            data.forEach(item => {
                item['isLoading'] = false;
                this.tableData.push(item)
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            row.isLoading = true;
            this.$confirm('此操作将进行删除操作, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                setTimeout(function () {
                    row.isLoading = false;
                }, 1500)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                row.isLoading = false;
            });
        }
    }
})

效果展示

ending
真棒！又学到了新的知识！！加油

您还可以看一下 jason老师的vue通用后台管理课程中的 element-ui在网页中的使用小节, 巩固相关知识点