记录ElementUI的bug：v-loading设置文本无效

已于 2023-11-07 11:19:33 修改
阅读量1.9k 收藏 2
点赞数 3
文章标签： elementui bug vue.js
于 2023-10-08 22:53:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42289279/article/details/133686428
版权

el-input上v-loding添加element-loading-text不起作用？

想要的效果如下图：

可以自定义文案、图标和背景色

参考ElementUI的文档，在el-input标签上添加了如下属性：

v-loading="dialogGenerateSQLLoading"

element-loading-text="拼命加载中"

element-loading-spinner="el-icon-loading"

但是并不生效，一直是默认的加载效果：

应该是ElementUI的bug，解决方案：

给el-input标签加一个div父元素，给div元素添加上面的属性，就可以了

最终效果：

 如果帮助到您了，可以留下一个赞👍告诉我  

程序猿小野
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
【Vue3-ElementPlus】关于v-loading不生效以及控制台输出[Vue warn]: Failed to resolve directive: loading 的问题
weixin_44733774的博客
12-11 3067
在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句，然后v-loading指令就能正常使用了。
Vue3+Element Plus 按需加载loading以服务方式调用不生效问题
蜡笔小星的博客
04-30 511
【代码】Vue3+Element Plus 按需加载loading问题。
vue中使用v-loading不生效的问题
qq_41930094的博客
06-23 5657
vue中使用v-loading加载biaoz 的时候，因为折叠面板导致实效
vue中加全局loading并添加自定义加载语
weixin_37582804的博客
04-02 3458
首先在模板页最外层标签添加绑定 < template v-loading=“loading”> 导入 import {Loading} from ‘element-ui’ 定义字段初始值： loading: false 加载调用 startLoading() { this.loading =Loading.service({ lock: true, // text: ‘加载中倒计时：...
【VUE】element-plus loading组件 text无法更新问题
azezeze的博客
10-21 772
查看官方文档，要想设置加载时显示的文字，需要修改的属性，可是当使用响应式数据进行绑定修改该值时，是没有生效的。官方仓库的一个说这种写法将会被废弃，推荐使用options的写法。又出现了两个新的问题，使用 options 后，1、loading加载层无法关闭2、loadingText的初始值为空时，loadingText更新后，页面还是显示为空。
vue自定义指令v-loading（vue2和vue3)
weixin_58031521的博客
02-16 1万+
vue实现自定义指令v-loading（包含vue2及vue3的写法）
Elements-plus中loading加载.....
qq_39175450的博客
04-24 961
导出文件接口用时过长时，希望通过一个loading的遮罩层来阻止用户在导出过程中进行其他操作，需求：将加载中的图标和文字显示在可视页面的中间范围，样式可以自定义。（1）第一步：在需要做遮罩层的元素上添加如下代码。（2）第二步：在样式中设置自定义样式。
vue-preview-bug:vue-preview使用Bug
04-08
对于提供的压缩包文件`vue-preview-bug-master`，这可能是包含了一个重现问题的示例项目。解压后，你可以通过查看代码、运行项目并复现问题来定位错误。通过这种方式，你可以更深入地理解问题所在，并尝试修复它。...
毕业设计：node-Express+vue实现的bug管理系统-毕业设计.zip
最新发布
07-14
毕业设计：node-Express+vue实现的bug管理系统-毕业设计
3.27-软件Bug详细记录表.doc
11-23
"3.27-软件Bug详细记录表.doc" 提供了一个系统化的方式来跟踪和处理程序中的错误或异常行为，以确保软件的质量和稳定性。以下是对该记录表中涉及的关键知识点的详细说明： 1. **功能模块**：这是软件开发中的一个...
redux-zero-logger:redux-zero 记录器中间件
05-29
redux-zero logger middlewareUsageconst createStore = require("redux-zero")const applyMiddleware = require("redux-zero/middleware")...长期造轮子，欢迎 follow.Contributors :bug: :artist_palette:License
Emoji-Log：Emoji-Log-Emoji Git提交日志消息规范标准。 [:package::OK_hand::bug::open_book::rocket::robot_face:]
02-02
EMOJI-LOG 在构建了我最终发明了一种称为EMOJI-LOG的git commit log标准，该标准可以帮助我仅通过查看git日志就能以... 例如:package: NEW ， :OK_hand: IMPROVE ， :bug: FIX ， :open_book: DOC ， :rocket: RELEAS
vue v-loading自定义指令的实现
qq_38152997的博客
05-29 1669
在实际项目中经常需要使用v-loading加载中的效果，这里使用简单的loading实现下
(vue)在ajax获取数据时使用loading组件不起作用
qq_42453890的博客
03-16 2184
问题描述： 在用ajax获取数据时 页面没有变化，想用一个loading图标在获取数据时显示，获取完成后隐藏 整个系统用到了vue框架，在执行sure方法时调用ajax函数 sure() { console.log("pl_lon:" + slng + " " + "pl_lat:" + slat + " " + "pr_lon:" + elng + " " + "pr_lat:" + elat ); console.log("s:" + this.st + " "
v-loading的使用（ElementUI）
热门推荐
weixin_45369499的博客
05-21 3万+
前言：需要获取后端接口数据到页面上进行显示，所以在请求发起至数据渲染页面的这段时间，为页面提供一个 loading 加载是极为必要的。 1.区域加载     以 table 表格为例，使用 v-loading，为其绑定一个布尔值（true/false），代码如下： <template> <div id="index"> <!-- 表格 --> <el-table :data="tableData" v-load
elementUI loading效果有滚动条时，滚动后遮罩无效
baolinDesign的博客
07-31 1132
2,修改css 样式， 给loding遮罩层的div样式 修改成 postion:fixed，这样也可以，但是需要在全局修改，不推荐使用！1，可能loading组件的高度不是100% ，经过查看，高度已经是100%了。给正在loading状态的页面禁止滚动 overflow: hidden;2，查看element ui 组件是否有自适应的设置字段 - 无。3，能不能让当前的页面不滚动，当请求完后再滚动 – 可以。
element-plus 自动导入 使用 v-loading 无法找到样式 element-plus/es/components/loading-directive/style/css 问题解决
HHH917的博客
02-24 5200
查找解决方法及当前使用版本 当前版本 "element-plus": "^2.0.2", "unplugin-auto-import": "^0.6.1", "unplugin-vue-components": "^0.17.20" 查找解决方法 先去GitHub 查 element-plus/issues/4855 发现里面的解决方式还不是很好，结合vs-code 查看 ElementPlusResolver 函数的源码声明 发现有exclude 属性 解决方法 使用正则表达式 排除load
element组件中loading的使用
m0_50618406的博客
11-15 1万+
我们在利用vue做项目的时候常常需要加载数据，如果从后台加载的数据较多，加载时间比较长的话，添加一个加载页面常常使得我们的项目更加美观。el-element组件库很方便的为我们提供了页面加载的组件。 比如我们加载表单中的数据时， 给其添加v-loading属性 <el-table :data="goodsList" style="width: 100%" stripe border highlight-current-row v-loading='loading' element-loading-t
windows系统error: metadata-generation-failed
08-19
在Windows系统中，当出现"error: metadata-generation-failed"错误时，可以尝试以下解决方案。首先，检查是否缺少setuptools-57.5.0。你可以执行以下命令来安装缺失的setuptools版本： pip install setuptools==57.5.0 -i https://pypi.tuna.tsinghua.edu.cn/simple 安装成功后，再次执行你的安装命令： pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple 这样应该就可以成功解决"error: metadata-generation-failed"错误了。 操作完成后，你应该能够看到安装成功的提示信息和安装的软件包列表。请确保按照上述步骤执行操作，并且使用正确的命令和参数。如果问题仍然存在，请检查你的网络连接或尝试使用其他镜像源进行安装。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [error: metadata-generation-failed](https://blog.csdn.net/weixin_46587777/article/details/129107880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [解决BUG：error: metadata-generation-failed](https://blog.csdn.net/qq_41475067/article/details/128631994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序猿小野

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值