iview table组件使用render函数，DOM重新渲染问题

最近在开发中使用iview Table组件，table中使用render 生成button，点击修改按钮的disabled状态。触发click事件后，发现只有数据改变，按钮状态并无变化。

iview table 中使用render生成button代码如下：

 {
    title: "action",
    key: "action",
    render: (createElement, context) => {
        return [
            createElement('Button', {
                props: {
                    type: 'primary',
                    disabled: context.row.disabled, 
                },
                on: {
                    click: () => {
                        context.row.disabled = true; 
                        
                        console.log(context.row.disabled); // true

                        // 发现打印出来的值已经改变，但是按钮状态并无改变
                    }
                }
            }, 'click')
        ];
    }
}

经过一番各种查找资料，最后发现，需要使用Vue.set函数，使DOM重新渲染。

官方文档中对应内容如下：

image.png

Vue官网-set

但是，使用set后发现依然没有效果

代码如下：

Vue.set(context.row.disabled,'disabled',true);

于是又继续深入研究发现，

需要有两点需要特别注意

1. 判断按钮状态的变量要放在数组中

我是后来放入了表格的数据中，使用index获取。可视情况而定。

this.data[index].disabled = true;

2. Vue.set修改数组的值，要把当前索引值对应项重新替换

let item = this.data[index];

item.disabled = true;

Vue.set(this.data,index,val)

完整代码如下：

{
    title: "action",
    key: "action",
    render: (createElement, context) => {
        return [
            createElement('Button', {
                props: {
                    type: 'primary',
                    disabled: context.row.disabled, 
                },
                on: {
                    click: () => {
                        let item = this.data[context.index];

                        item.disabled = true;

                        Vue.set(this.data,context.index,val);
                    }
                }
            }, 'click')
        ];
    }
}

以上，问题解决！

原创非转，欢迎相互学习交流！