ELEMENT-PLUS loading组件 text无法更新问题

只发现解决办法，未明确原因

官方样例（根据官方样例修改，只保留关键位置）

引用地址

<template>
  <el-table
    v-loading="loading"
    element-loading-text="Loading..."
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(true)
</script>
<style>

</style>

根据官方给出的样例 text属性需要element-loading-text进行设置，可是根据此设置会导致在loading显示过程中，text无法修改

比如

<template>
  <el-table
    v-loading="loading"
    :element-loading-text="loadingText"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(true)

const loadingText = ref('123')
setTimeout(()=>{
    loadingText.value = 'abc'
},1000)
</script>
<style>

</style>

按照正常逻辑 loading文案应该先显示 123 1秒后显示 abc；结果却是一直显示123

根据ELEMENT-PLUG-github官方仓库的issure

element-loading-text 这种写法会被废弃，推荐使用options的写法

<template>
  <el-table
    v-loading="{visible:loading,text:loadingText}"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(true)

const loadingText = ref('123')
setTimeout(()=>{
    loadingText.value = 'abc'
},1000)
</script>
<style>
</style>

这种写法可解决text无法更新的问题，但伴随者新的两个问题

1. loading无法关闭
2. loadingText初始值为空时，loadingText更新后，页面loading任然为空

<template>
  <el-table
    v-loading="{visible:loading,text:loadingText}"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(true)

const loadingText = ref('')
setTimeout(()=>{
    loadingText.value = 'abc'
},1000)
setTimeout(()=>{loading.value = false},2000)
</script>
<style>
</style>

最终解决方案

loadingText的值尽量不为空，可用空格替代 指令写法改为短路与

<template>
  <el-table
    v-loading="loading && {text:loadingText}"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(true)

const loadingText = ref(' ')
setTimeout(()=>{
    loadingText.value = 'abc'
},1000)
setTimeout(()=>{loading.value = false},2000)
</script>
<style>
</style>