【VUE】element-plus loading组件 text无法更新问题

最新推荐文章于 2025-01-11 14:57:14 发布

azezeze

最新推荐文章于 2025-01-11 14:57:14 发布

阅读量1.5k

点赞数 5

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/azezeze/article/details/133958578

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

文章讲述了在Vue中使用ElementUI的v-loading动态设置加载文字时遇到的问题，包括响应式绑定失效、选项式写法导致的加载层关闭和初始值为空的显示问题。最后提供了将loadingText初始值设为空格的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-table
    v-loading="loading"
    element-loading-text="Loading..."
  >
  </el-table>
 
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(true)
</script>

查看官方文档，要想设置加载时显示的文字，需要修改 element-loading-text 的属性，可是当使用响应式数据进行绑定修改该值时，是没有生效的。

官方仓库的一个issure说这种写法将会被废弃，推荐使用options的写法。

<template>
  <el-table
    v-loading="{visible: loading, text:loadingText}"
    element-loading-text="Loading..."
  >
  </el-table>
 
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(true)
const loadingText = ref('') // 自行写逻辑修改该值
</script>

上面方法已经解决了text无法更新的问题，但是！！！
又出现了两个新的问题，使用 options 后，
1、loading加载层无法关闭
2、loadingText的初始值为空时，loadingText更新后，页面还是显示为空

最终解决办法

loadingText初始值不要为空，可以使用空格代替：const loadingText = ref(’ ')
代码修改

v-loading="{loading && { text:loadingText}"