iview table 里button的loading属性

亦凉 2022-08-30 05:22 126阅读 0赞

<template slot-scope="{row, index}" slot="action">
        <ButtonGroup shape="circle">
            <Button @click="modifyItem(row.id)" type="primary">修改</Button>
            <Button type="warning" :loading="loading1[index]">
            <Poptip @on-ok="syncDailyItem(row.id, index)" title="你确定要同步吗？" :transfer="true" :confirm="true">同步					    	   </Poptip>
            </Button>
        </ButtonGroup>
    </template>

syncDailyItem (id, index) { 
        this.$set(this.loading1, index, true)
        syncDaily({  id: id }).then(res => { 
            this.$Message.success(res.data.result.message)
            this.tableData[index].mediaId = res.data.result.mediaId
            this.$set(this.loading1, index, false)
        }).catch(err => { 
            this.$set(this.loading1, index, false)
        })
    }

区别？

this.loading1\[index\] = true 和 this.$set(this.loading1, index, true) 两者有很大的区别，第一种写法变量只会在方法内生效，并不会改变全局数组元素的值，因此如果写成第一种，其实按钮是不会有loading效果的。

[iview table 里button的loading属性填坑][iview table _button_loading]  
[【Vue】iview table 里button的loading属性如何配置][Vue_iview table _button_loading]

[iview table _button_loading]: https://blog.dandy.fun/archives/309.html
[Vue_iview table _button_loading]: https://www.h5w3.com/83258.html

发表评论取消回复

表情：

评论列表（有 0 条评论，126人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview—Table表格render 渲染

1.序号 2.if判断、a标签 3.if判断、Input输入 4.renderHeader自定义列头的点击事件、render的Input点击事件

Dear 丶/ 2023年06月04日 02:53/ 0 赞/ 52 阅读

相关 table iview this 问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzQy

青旅半醒/ 2023年02月28日 12:49/ 0 赞/ 12 阅读

相关 iview table设置hover上去的颜色

亲测有效 ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-h

我就是我/ 2022年12月06日 01:17/ 0 赞/ 338 阅读

相关 iview table 里button的loading属性

<template slot-scope="{row, index}" slot="action"> <ButtonGroup shape="circl

亦凉/ 2022年08月30日 05:22/ 0 赞/ 127 阅读

相关 iview table高度动态设置

iview table高度动态设置在使用iview table表格组件的时候，由于我的屏幕分辨率比较大，在自己pc机上设置的固定高度很适合，在测试（tes

- 日理万妓/ 2022年06月02日 02:24/ 0 赞/ 283 阅读

相关 vue iview table显示图片

使用render渲染图片的代码： ![70][] 其中，图片的地址应该是使用attrs而不是经常使用的props，这点坑了自己很久。然后就是图片要想访问得到有两种方式

旧城等待，/ 2022年05月21日 08:51/ 0 赞/ 279 阅读

相关 iview中table排序

看到一篇比较好的文章，分享出来：[https://blog.csdn.net/qmzmzxk/article/details/81748422][https_blog.csdn

今天药忘吃喽~/ 2022年04月06日 05:42/ 0 赞/ 501 阅读

相关 IView table单选实现

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一纸荒年。/ 2021年11月26日 22:04/ 0 赞/ 357 阅读

相关 iview tables组件 render时添加title属性

在iview的Table表格中，如果数据超出当前列的宽度，多余的部分会折行显示，使得该行的高度增加。为了实现\ 文本将不换行，超出部分显示为省略号的效果，iview提供了

「爱情、让人受尽委屈。」/ 2021年11月26日 12:52/ 0 赞/ 335 阅读

相关 iview Table的样式，功能修改

在后台系统中经常用到的table跟iview的有较大区别 eg: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

淡淡的烟草味﹌/ 2021年09月17日 02:56/ 0 赞/ 924 阅读