iview table 里button的loading属性如何配置

Question

render渲染的button这样添加loading属性，触发事件后所有的按钮都会是loading状态，有什么方法可以只让当前被点击的按钮loading吗？

{
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index, params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        loading: this.loading
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index, params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }

Answer 1

你将loading定义为数组，然后loading:this.loading[params.index],你在根据点击传入的params.index来改变loading数组对应的值不就好了

Answer 2

你解决了吗？我现在也遇到这个问题了

Answer 3

每個btn持有一個loading

Answer 4

先定义一个数组存放
for(let i = 0; i < vm.infoMangementPage.pageSize; i++) {

 vm.UploadLoading[i] = false;

}
const infoMangementReport = (vm, h, currentRow, index, params) => {

    return h('Button', {
        props: {
            type: 'primary',
            loading: vm.UploadLoading[index]
        },
        style: {
            margin: '10px 0 0 10px'
        },
        on: {
            'click': () => {
                vm.$set(vm.UploadLoading,index,true);
                            
                getMethod('调取后端接口', {
                    params: {
                       
                    }
                }).then(res => {
                    vm.$set(vm.UploadLoading,index,false);
                   
                })     
            }
        }
       
    }, '编辑')
}

Answer 5

使用jsx更简单，
，后面的点击事件中操作控制loading的属性状态。

Answer 6

render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                        ghost: true,
                                        loading:params.row.$isLoading
                                    },
                                    on: {
                                        click: () => {
                                            this.processClick(params);
                                        }
                                    }
                                },
                                "获取任务"
                            )
                        ]);
                    }
                    

methods:{
    processClick(params){
        this.$set(params.row, '$isLoading', true)
    }
}

Answer 7

解决了么 我也遇到这个问题了