el-button loadding效果

你可以使用 Element UI 中的 `<el-button>` 组件来实现 loading 效果。在 `<el-button>` 中添加 `loading` 属性即可启用 loading 效果，例如：

<template>
  <el-button :loading="loading">加载中</el-button>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true;
      // 发送请求获取数据
      // ...
      this.loading = false;
    }
  }
}
</script>

在上面的代码中，当 `loading` 属性为 `true` 时，按钮就会显示 loading 效果。你可以在需要进行数据加载的时候将 `loading` 设置为 `true`，在数据加载完成后再将其设置为 `false`，以达到 loading 效果的目的。

相关问题

el-button loading

el-button 组件在 Vue.js 中是一个常用的按钮组件，它有一个 loading 属性，可以用来控制按钮是否处于加载状态。当 loading 属性为 true 时，按钮会显示一个加载动画，防止用户重复点击。

示例代码如下：

<el-button :loading="loading" @click="submit">提交</el-button>

在组件中，我们需要定义 loading 属性，并在点击事件中调用 submit 方法。在 submit 方法中，我们可以使用异步请求来模拟数据提交的过程，并在请求开始和结束时设置 loading 属性的值，从而控制按钮的加载状态。

示例代码如下：

<template>
  <el-button :loading="loading" @click="submit">提交</el-button>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async submit() {
      this.loading = true
      await this.$http.post('/api/submit')
      this.loading = false
    }
  }
}
</script>

v-loading放在el-button中

`v-loading` 是 Element UI 中的一个指令，用于在一个元素上显示加载状态，通常配合 `el-button` 使用是为了在按钮点击时显示一个加载图标或者文字，表示数据正在加载。例如：

<template>
  <el-button type="primary" :loading="isLoading">加载中...</el-button>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false, // 初始设置为 false，表示默认不加载
    };
  },
  methods: {
    handleLoad() {
      this.isLoading = true; // 点击按钮时将 isLoading 设置为 true，显示加载状态
      // 在这里处理异步请求...
      setTimeout(() => {
        this.isLoading = false; // 请求完成后，再次设置回 false，隐藏加载状态
      }, 2000); // 假设这是一个异步操作，这里用了定时器模拟
    },
  },
};
</script>

在这个例子中，当用户点击带有 `v-loading` 的按钮时，会显示“加载中…”的文字，而实际的业务逻辑在 `handleLoad` 方法内部执行。完成加载后，再通过 `this.isLoading = false` 来关闭加载状态。