antd vue中遍历v-for中控制每个按钮的loading

最新推荐文章于 2023-10-17 09:57:56 发布

reembarkation

最新推荐文章于 2023-10-17 09:57:56 发布

阅读量666

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/reembarkation/article/details/132083763

版权

项目中遇到一个需求，需要根据后台返回数据，遍历生成多个按钮，并点击出发事件。点击事件的时候需要该按钮loading状态。实现方法如下：

<div class="center">
         <a-button v-for="(item,index) in btnItems" type="primary" :key="index" :loading="clickIndex === index && changeLoading"  @click="exportForm(item.id)">{{item.text}}</a-button>
    </div>

 data () {
      return {
        clickIndex:-1,
        changeLoading:false
      }
    },

exportForm(tempateId,index,item){
          this.clickIndex=index
          this.changLoading=true
            ....
            // 处理结束后重新赋值
          this.clickIndex=-1
          this.changLoading=false
        },