How to configure the loading attribute of button in iview table

button rendered by render adds the loading attribute so that all buttons will be in loading state after triggering the event. Is there any way to make only the button that is currently clicked 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)
                                        }
                                    }
                                }, "")
                            ]);
                        }
                    }

Iview vue.js

Mar.13,2021

have you solved it? I now have this problem

you define loading as an array, and then loading:this.loading [params.index], you can change the corresponding value of the loading array according to the params.index passed in.

each btn holds a loading

solve this problem

first define an array to store
for (let i = 0; I < vm.infoMangementPage.pageSize; iPP) {

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

it is easier to use jsx,
, and the actions that follow in the click event control the attribute status of the 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)
    }
}

Previous: Set element height in vue

Next: Could you tell me how to start the jar package with docker to mount the required folder?

The problem of using the menu bar of iview frame in vue
as shown in the figure, I used the menu bar component of ivew in vue figure 1. I selected the content on the right side of the login log to display the contents of the login log, which is normal . then I set up a @ click route on the account profile d...

Iview vue.js

Feb.26,2021
How does the Submenu option in the navigation menu component of iview bind events that click on the title?
as shown in figure 1, the on-select event of iview s navigation menu is useful only if the drop-down suboption is selected. but what I need now is to trigger my custom click event when I click on the title "my assets ", such as @ click= "capital " ...

Iview vue.js

Feb.28,2021
Date-picker problem of iview
have you ever used the date-picker element of iview that can be displayed, but when you click to select a date, you report an error and the date does not come out? this is why ...

Iview vue.js

Feb.28,2021
Data Circulation problem of drop-down Selector in iview component
...

Iview vue.js

Feb.28,2021
How to use table of iview to dynamically show and hide tr?
how to show hide rows without push,splice the bound data of table? Do you use v-show or v-if or do you implement it directly in render? ...

Iview vue.js

Mar.01,2021
Using the iview component library, font icons are not displayed
I use the iview component library (2.11.0) and follow the instructions on the official website https: www.iviewui.com docs . to use the date component, but in the local project, the font icon is not loaded, as shown in figure this is how I introduc...

Iview vue.js

Mar.01,2021
What is the data saved after the DatePiker selection of `daterange` in iView?
daterange type of DatePiker in iView <DatePicker type="daterange" confirm placement="bottom-end" placeholder="Select date" style="width: 200px">< DatePicker> what type of data is stored in the sel...

Iview vue.js

Mar.02,2021
Does it mean that all props of a child component must be passed with a colon `:` when the parent component is a parent?
is it true that all props of a child component must be passed : with a colon at the time of the parent component? in subcomponents: props: { a: { xxx }, b: { xxx } } when using subcomponents: <sub-comp :a="xxx" :b=&qu...

Iview vue.js

Mar.03,2021
Iview uses button components
buttonproject-details.vue organization-project button iviewbutton after changing the warning for a long time, it is still . ...

Iview vue.js

Mar.03,2021
Cannot set FormItem as Modal footer, when iview Form and Modal are used at the same time. Form validation cannot be performed.
write a route management page, click add Route pop-up modal, to fill out the form and verify it automatically. but the button cannot be rendered correctly with < div slot= "footer " > . Code: html fragment: <Modal v-model="addRouteModal&...

Iview vue.js

Mar.03,2021
The tree component in iview uses render to customize the content tree to display problems
after the tree component in iview uses render custom content, clicking on the tree node no longer displays the background. How to add background color to the currently selected node in render rendering? 1, the default tree component, click 2render w...

Iview vue.js node.js

Mar.04,2021
How to correctly render the html tag content in a string by the table component in iview
I want to make a table with iview. The first column should look like this: :This study establishes the first mutational report of the TGFBR3 gene in correlation with ovarian failure. iviewapi : : ivew : render https: www.iviewui.com compo... i...

Iview vue.js html

Mar.04,2021
After run build packaging using iview scaffolding, route 404
after using iview scaffolding for run build packaging, part of the route is 404, and there is no 404 pages after refreshing, only the home page does not have 404, it is no problem to run with run dev. PS: opens a new window (multiple pages) by adding ta...

Webpack iview vue.js

Mar.05,2021
Iview's tree has customized the render method, and there is no background color after clicking. Now I use a way of writing death myself. Is there any other better way to change it?
...

Iview vue.js

Mar.05,2021
When using the select component of iview for remote search, there was a problem with the editing function and the default value could not be selected.
< FormItem label= "responsible person: " prop= "chargeUserId " > <Select v-model="cubForm.chargeUserId" filterable clearable remote :remote-method="remoteMethod2" :loading="loading2...

Iview vue.js

Mar.06,2021
The list style and clicks of the select component of iview are invalid
the select component of iview has no effect on list styles and clicks after loading this component on demand, but there is no problem with using this select component after the global introduction of iview in main.js. Only style files are introduced in ...

Iview vue.js javascript

Mar.06,2021
After iview sets type:html in table, render seems to be invalid and cannot call the click event.
title: itemDate, key: itemDate, type: html , align: center , render:(h,params)=>{ return h( div , { props: { type...

Node.js iview vue.js

Mar.06,2021
The problem of on-error callback for uploading pictures using the upload component of iview component library
upload an image using the upload component of the iview component library, and the backend will verify the width and height of the image. If it is incorrect, the following error will be thrown: code:"failure" result:"upload.invalid.size&...

Iview vue.js

Mar.07,2021
How to implement it in iview? click the button and start uploading attachments.
1. Use the upload component in iview. After selecting the file, click the upload button to start uploading the upload api document of 2.iview. the hook before before-upload uploads the file. The parameter is the uploaded file. If false or Promise is ...

Upload iview vue.js javascript

Mar.07,2021
How does iview table set the filter?
columns2: [{title: other mobile phone numbers bound by this person , key: mobile }, {title: ,key: nameCount }, {title: ,key: queryOrgCount }, {title: ,key: mno }, ...

Iview vue.js

Mar.08,2021