怎么给elementui按钮添加进度条效果

你可以使用Element UI的el-button组件和el-progress组件，将它们组合起来实现按钮进度条的效果。具体实现步骤如下：

1. 在el-button组件中添加一个slot，用来渲染进度条组件。

2. 在按钮被点击时，通过JavaScript控制进度条的进度。

下面是一个简单的示例代码：

<template>
  <el-button @click="startLoading" :loading="loading">
    {{ loading ? 'Loading' : 'Click me!' }}
    <template v-if="loading">
      <el-progress type="circle" :percentage="percentage" />
    </template>
  </el-button>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      percentage: 0,
      timer: null
    };
  },
  methods: {
    startLoading() {
      this.loading = true;
      this.timer = setInterval(() => {
        this.percentage += 10;
        if (this.percentage >= 100) {
          clearInterval(this.timer);
          this.loading = false;
          this.percentage = 0;
        }
      }, 200);
    }
  }
};
</script>

在上面的代码中，我们使用了el-button组件和el-progress组件，当按钮被点击时，会触发startLoading方法，通过JavaScript控制进度条的进度，直到进度条达到100%时停止，并将loading状态设置为false，按钮恢复可点击状态。

需要注意的是，在el-button组件中添加的slot只有在loading状态为true时才会渲染，否则不会显示进度条组件。