将loading效果添加到el-dialog中

可以通过在el-dialog组件中使用slot插槽来添加loading效果。具体步骤如下：

1. 在el-dialog组件中添加一个名为loading的slot：

<el-dialog>
  <template v-slot:loading>
    <div class="loading-wrapper">
      <el-loading-spinner></el-loading-spinner>
    </div>
  </template>
  <!-- 对话框内容 -->
</el-dialog>

2. 在slot中添加loading效果的HTML和CSS代码。在这个例子中，我们使用了ElementUI的el-loading-spinner组件来显示旋转动画，然后将其包裹在一个div中，并为其添加了样式：

.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.el-loading-spinner {
  font-size: 24px;
  color: #67C23A;
}

3. 在需要时，在对话框的内容中显示loading效果。你可以使用v-if指令来控制loading效果的显示和隐藏：

<el-dialog :visible.sync="dialogVisible">
  <template v-slot:loading>
    <div class="loading-wrapper">
      <el-loading-spinner></el-loading-spinner>
    </div>
  </template>
  <div v-if="!loading">
    <!-- 对话框内容 -->
  </div>
</el-dialog>

注意，这里我们使用了一个名为loading的变量来控制loading效果的显示和隐藏。在需要显示loading效果时，将loading变量设置为true即可：

this.loading = true;

当对话框内容加载完成后，将loading变量设置为false即可：

this.loading = false;