个人猜测是Element Plus组件库的v-loading指令不支持el-dialog组件上使用 解决方案1 加一个全局loading,Element Plus组件库不但可以通过v-loading指令实现,也支持以服务的形式实现,关键代码如下: import{ElLoading}from"element-plus";constloading =ElLoading.service({lock:true,text:"数据加载中...",background:"r...
如果 el-loading 无法在 el-dialog 中使用,可能是使用方式不正确或存在其他干扰因素。 2. 确保el-loading的引入和注册正确 确保您已经在项目中正确引入了 el-loading 组件。如果您是使用 Vue 并通过 npm 安装的 Element Plus 或 Element UI,那么通常不需要额外引入,因为它们是内置组件。但如果是按需引入,需要确保...
当v-loading设置fullscreen时,el-dialog模态框会被v-loading的遮罩层遮住,这时候,我用了很多种方法,包括设置z-index等,都没什么作用。调试的过程中发现,如果el-dialog不垂直居中,就不会被遮住。 但我宁愿v-loading不居中,也不想让模态框不居中啊。所以我取消了v-loading的fullscreen,直接用定位让加载图标屏幕居中...
<template> <el-dialog ref="dialogRef" v-model="dialogVisible" > ... <template #footer> <el-button @click="save">save</el-button> </template> </el-dialog> </template> <script setup lang="ts"> import { ref } from 'vue' import { ElLoading } from 'element-plus' const dialogRef...
如果在对话框打开以后,再请求API,是不是就可以了。我便将请求API的语句放在Dialog 打开动画结束时的回调函数 opened中。果然,这次我打开对话框的时候,loading动画覆盖在了对话框之上,成功解决问题! 记在最后,关于前端中,各种执行,渲染的顺序还需要继续深入了解才是。
const dialogPanel = ref() // 接收 ElLoading.service对象,用于关闭 Loading // el-dialog 触发 Loading 的函数 function initDialog () { dialogPanel.value = ElLoading.service({ target: mv.value.dialogRef, // el-dialog 对象 text: 'Loading...', // Loading 的提示信息 ...
Element UI version 2.4.11 OS/Browsers version windows 10 last/chrome last Vue version 2.5.21 Reproduction Link https://jsfiddle.net/shellus/ua2kfyzo/ Steps to reproduce 点击dialog按钮打开dialog框 点击dialog框内的“提交表单” 按钮,此时会开始loading What
为了解决这个问题,我们可以使用el-dialog组件的loading属性。loading属性是一个布尔值,当设置为true时,对话框将显示一个加载中的状态。我们可以使用这个属性来在对话框打开时显示加载状态,并在数据加载完成或异步操作完成后将其设置为false。 下面是一个简单的示例代码,演示了如何使用el-dialog组件的loading属性来显示加载...
【v-loading】:这个是控制表格加载的,为true就加载,为false就停止加载,crud有一个loading属性来控制,比如添加后要重新加载一下,编辑要重新加载一下等等。 【data】:这个是表格的数据,等于crud.data,而crud.data属性会获取后端传来的数据,这个我们后面再说。