vue3+elementUI如何動態(tài)修改Loading中提示文字
更新時間：2025年05月31日 18:47:32 作者：weixin_45658815
這篇文章主要介紹了vue3+elementUI如何動態(tài)修改Loading中提示文字的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題
使用elementUI加載組件loading時 需要將循環(huán)中的值動態(tài)展示在加載遮罩層上，發(fā)現(xiàn)了element-loading-text屬性可以自定義提示文字，于是寫出如下代碼
<div class="mycontainer" v-loading.fullscreen="download" :element-loading-text="loadingText">
結(jié)果發(fā)現(xiàn)loadingText的值并不會動態(tài)變化，但是處于{{loadingText}}中的值卻是一直在變化的，可是element-loading-text中似乎無法檢測到，看了網(wǎng)上幾篇文章似乎寫的不是很詳細，第一次用看得有點懵懵的，解決之后在此記錄一下
解決方案
<template> <div class="mycontainer" > </template>
import {ElLoading} from "element-plus";
function setLoading(){
let loading = ElLoading.service({fullscreen: true, text: '文件準備中：'});//定義loading
for (let i = 1; i < (query.total / query.pageSize) + 1; i++) {
loading.setText(`文件準備中：${i} /${query.total / query.pageSize}`)//動態(tài)修改loading
}
loading.close()//關(guān)閉遮罩層
}最終效果
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue-cli使用stimulsoft.reports.js的詳細教程
Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設(shè)計，編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
關(guān)于Vue3中element-plus的el-dialog對話框無法顯示的問題及解決方法
最近今天在寫一個停車場管理系統(tǒng)的項目時,在用vue3寫前端時,在前端模板選擇上,我一時腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯誤連連,下面給大家分享dialog對話框無法顯示的原因,感興趣的朋友一起看看吧2023-10-10
在 Vue 開發(fā)中,組件通信是構(gòu)建復(fù)雜應(yīng)用的基礎(chǔ),本文將對比 Vue 2 與 Vue 3,帶你梳理最常用的 5 種通信方案,有需要的小伙伴可以根據(jù)需要進行選擇2026-02-02
vscode中eslint插件的配置（prettier配置無效）
這篇文章主要介紹了vscode中eslint插件的配置（prettier配置無效），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了Vue自定義全局Toast和Loading,需要的朋友可以參考下2019-04-04
vuejs2.0實現(xiàn)分頁組件使用$emit進行事件監(jiān)聽數(shù)據(jù)傳遞的方法
這篇文章主要介紹了vuejs2.0實現(xiàn)分頁組件使用$emit進行事件監(jiān)聽數(shù)據(jù)傳遞的方法，非常不錯，具有參考借鑒價值，,需要的朋友可以參考下2017-02-02
vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家介紹了axios接口管理優(yōu)化操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題
這篇文章主要介紹了解決vue項目input輸入框雙向綁定數(shù)據(jù)不實時生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08