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)文章
vue使用assign巧妙重置data數(shù)據(jù)方式
這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue引用外部JS的兩種種方案,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue.js 加入高德地圖的實現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
本篇文章主要介紹了vue input輸入框模糊查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本文主要介紹了elementui下image組件的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要為大家詳細介紹了如何在你的Vue項目中實現(xiàn)累加動畫，文中的示例代碼簡潔易懂，具有一定的參考價值，感興趣的小伙伴可以了解一下2023-06-06
vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖
因為工作中要用到甘特圖,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關(guān)于vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖的相關(guān)資料,需要的朋友可以參考下2022-11-11
因為在vue中對象都是用了代理重寫了get,由于get重寫也就導致了瀏覽器不能直接獲取到具體的值,因此才會在打印的時候為...,手動點擊展開才顯示具體的值，這篇文章主要介紹了為什么vue打印的對象在瀏覽器中顯示,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了如何使用vue-router為每個路由配置各自的title,及使用vue router的方法，需要的朋友可以參考下2018-07-07
這篇文章主要給大家介紹了關(guān)于vue3中組件事件和defineEmits的相關(guān)資料,組件事件是Vue組件之間進行通信的一種方式,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-10-10