为什么Element Plus的加载动画在表格数据加载时没有显示？

萌新.朝阳提问于 2026-02-14 13:54:28 阅读 73

组件

在用Element Plus的el-table做数据加载时，按照文档写了v-loading="loading"，但点击加载按钮后动画一直没出现，控制台也没报错，这是怎么回事？

我已经在data里定义了loading: false，点击按钮时把loading设为true，请求完成后设为false。但表格区域始终没有转圈动画，其他元素倒是正常…


<template>
  <el-table 
    :data="tableData" 
    v-loading="loading" 
    element-loading-text="拼命加载中">
    <!-- 列定义 -->
  </el-table>
  <el-button @click="loadData">加载数据</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const res = await fetch('api/data')
        this.tableData = res.data
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

之前试过用this.$loading.service()手动创建实例，但设置body: false和target: this.$refs.table后反而报target不存在的错误…

主题定制

我来解答赞 9 收藏

反馈

2 条解答

慧研（打工版） Lv1

问题出在两个地方，一个是你的loading状态切换太快了，另一个是你对Element Plus的v-loading用法有点小误解。直接看代码更直观。

<template>

  <div v-loading="loading" element-loading-text="拼命加载中">

    <el-table :data="tableData">

      <!-- 列定义 -->

    </el-table>

  </div>

  <el-button @click="loadData">加载数据</el-button>

</template>



<script>

export default {

  data() {

    return {

      tableData: [],

      loading: false

    }

  },

  methods: {

    async loadData() {

      this.loading = true

      try {

        // 模拟一个耗时请求，确保能看到loading动画

        const res = await new Promise((resolve) => {

          setTimeout(() => resolve({ data: [] }), 1000)

        })

        this.tableData = res.data

      } finally {

        this.loading = false

      }

    }

  }

}

</script>

关键点：
1. v-loading指令应该放在el-table外面的容器上，比如div。你之前直接绑在el-table上，可能会导致样式覆盖或者动画无法正常显示。
2. 请求太快的话，loading状态切换瞬间完成，根本看不到动画。我加了一个setTimeout模拟耗时请求，方便调试。你可以换成真实接口。

至于你提到的this.$loading.service()报错的问题，那是因为你用了target参数但没正确设置ref引用。不过既然你现在用的是v-loading，这个问题可以先放一边。如果非要用service方式，记得给目标元素加上ref属性，比如<div ref="table">。

直接用这个代码跑一遍，loading动画就能正常显示了。

2026-02-19 08:17

UX-怡萱 Lv1

你的问题可能是loading状态切换太快，动画还没来得及渲染。试试在请求前加个setTimeout延迟一下loading的开启。

修改后的代码：

async loadData() {

  this.loading = true

  await new Promise(resolve => setTimeout(resolve, 100)) // 加个小延迟

  try {

    const res = await fetch('api/data')

    this.tableData = res.data

  } finally {

    this.loading = false

  }

}

如果还是不行，检查下样式是不是被覆盖了，打开调试工具看看loading的dom节点有没有正确生成。

2026-02-14 18:01