vue3+elementUI 动态修改Loading中提示文字

vue3+elementUI 动态修改Loading中提示文字

问题

使用elementUI加载组件loading时 需要将循环中的值动态展示在加载遮罩层上,发现了element-loading-text属性可以自定义提示文字,于是写出如下代码

<div class="mycontainer" v-loading.fullscreen="download"  :element-loading-text="loadingText">

结果发现loadingText的值并不会动态变化,但是处于{{loadingText}}中的值却是一直在变化的,可是element-loading-text中似乎无法检测到,看了网上几篇文章似乎写的不是很详细,第一次用看得有点懵懵的,解决之后在此记录一下

解决方案

<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}`)//动态修改loading
		}
		loading.close()//关闭遮罩层
}

最终效果

在这里插入图片描述

### ElementUI 表格加载动画实现方法 在开发基于 VueElementUI 的应用时,为表格组件添加加载动画可以提升用户体验。ElementUI 提供了内置的支持来轻松集成这一特性。 #### 使用 `loading` 属性控制加载状态 为了启用加载指示器,在 `<el-table>` 组件上设置 `:loading="isLoading"` 属性[^1]。此属性接受布尔值参数;当其被设为 true 时会显示默认样式或自定义样式的加载图标。 ```html <template> <div id="app"> <!-- Table with loading state --> <el-table :data="tableData" style="width: 100%" :loading="isLoading"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <!-- Button to toggle the loading status --> <el-button @click="toggleLoading">切换加载</el-button> </div> </template> <script> export default { data() { return { isLoading: false, tableData: [ { date: &#39;2016-05-03&#39;, name: &#39;王小虎&#39;, address: &#39;上海市普陀区金沙江路 1518 弄&#39; }, // More items... ] }; }, methods: { toggleLoading() { this.isLoading = !this.isLoading; } } }; </script> ``` 上述代码展示了如何通过点击按钮改变 `isLoading` 变量的状态从而触发加载动画的开启与关闭。 #### 自定义加载提示文案和背景颜色 如果希望进一步定制化加载过程中的视觉表现形式,则可以通过传递对象给 `loading` 属性来进行更细致化的调整: ```javascript // 更加详细的配置选项 const customLoadingOptions = { text: "拼命加载中...", // 设置加载文字描述 spinner: "el-icon-loading", // 修改旋转图标类名,默认是 el-icon-loading background: "rgba(0, 0, 0, .7)" // 背景遮罩层的颜色透明度 }; // 将这些选项应用于表格组件 <el-table :data="..." :loading="customLoadingOptions"> ``` 这样就可以根据实际应用场景灵活修改加载期间所呈现的信息以及外观效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值