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

Z时代
2024-01-10
分类：技术分享

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)
}
}
}, '删除')
]);
}}

回答

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

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

每個btn持有一個loading

先定义一个数组存放
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);
                })     
            }
        }
    }, '编辑')}

使用jsx更简单，
【Vue】iview table 里button的loading属性如何配置，后面的点击事件中操作控制loading的属性状态。

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)
    }}