v-loading + el-progress

"v-loading"是Vue.js的一个指令，它可以在数据加载时显示一个加载指示器。而"el-progress"是Element UI库中的一个组件，它可以显示一个进度条，用于展示任务或操作的完成进度。

如果你想在数据加载时同时使用这两个组件，可以将它们结合在一起使用。具体实现可以参考以下代码：

<template>
  <div>
    <el-progress :percentage="percentage"></el-progress>
    <div v-loading="loading">
      // 数据加载完成后展示的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      percentage: 0
    }
  },
  methods: {
    loadData() {
      // 模拟数据加载过程
      let timer = setInterval(() => {
        this.percentage += 10
        if (this.percentage >= 100) {
          clearInterval(timer)
          this.loading = false
        }
      }, 500)
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

在上面的代码中，我们将"el-progress"组件和"v-loading"指令都放在了同一个父元素中。"v-loading"指令的作用是在数据加载时显示一个加载指示器，而"el-progress"组件则用于展示任务的完成进度。在"mounted"钩子中，我们调用"loadData"方法模拟数据加载过程。在加载过程中，我们通过修改"percentage"属性来控制进度条的进度，同时在加载完成后将"loading"属性设置为false，这样就可以隐藏加载指示器了。