最近在开发中使用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
但是，使用set后发现依然没有效果
代码如下：
Vue.set(context.row.disabled,'disabled',true);
于是又继续深入研究发现，
需要有两点需要特别注意
- 判断按钮状态的变量要放在数组中
我是后来放入了表格的数据中，使用index获取。可视情况而定。
this.data[index].disabled = true;
- 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')
];
}
}
以上，问题解决！
原创非转，欢迎相互学习交流！
