element-ui avue 设置table 行操作按钮加载状态

最新推荐文章于 2024-08-01 16:34:48 发布

原创最新推荐文章于 2024-08-01 16:34:48 发布 · 574 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #前端

element 专栏收录该内容

20 篇文章

订阅专栏

文章讲述了如何在Vue.js应用中设置按钮的加载状态，特别是在点击发布按钮时，如何通过`scope.row.loading`来控制加载状态，并在`publish`方法中进行异步操作，如发布数据，然后更新loading状态并显示成功消息。

1.按钮设置

<el-button  :loading="scope.row.loading" @click="publish(scope.row)">发布</el-button>

2.在方法中改变loading的状态值

 publish(data) {
      if (!data.id) {
        return
      }
      this.$set(data, 'loading', true)
      release(data.id).then(res => {
        this.onLoad(this.page);
        this.$set(data, 'loading', false)
        this.$message({
          type: 'success',
          message: '发布成功!'
        });
      })
}

因为我们是想点击哪行哪行触发加载所以就的改变scoped.row的值，开始没想点击一个全部转起来了。。。。

关注博主即可阅读全文