最近在開發(fā)中使用iview Table組件度帮，table中使用render 生成button歼捏，點(diǎn)擊修改按鈕的disabled狀態(tài)。觸發(fā)click事件后，發(fā)現(xiàn)只有數(shù)據(jù)改變瞳秽，按鈕狀態(tài)并無(wú)變化瓣履。
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
// 發(fā)現(xiàn)打印出來(lái)的值已經(jīng)改變，但是按鈕狀態(tài)并無(wú)改變
}
}
}, 'click')
];
}
}
經(jīng)過(guò)一番各種查找資料寂诱，最后發(fā)現(xiàn)拂苹，需要使用Vue.set函數(shù)，使DOM重新渲染痰洒。
官方文檔中對(duì)應(yīng)內(nèi)容如下：
image.png
但是瓢棒，使用set后發(fā)現(xiàn)依然沒(méi)有效果
代碼如下：
Vue.set(context.row.disabled,'disabled',true);
于是又繼續(xù)深入研究發(fā)現(xiàn)，
需要有兩點(diǎn)需要特別注意
- 判斷按鈕狀態(tài)的變量要放在數(shù)組中
我是后來(lái)放入了表格的數(shù)據(jù)中丘喻，使用index獲取脯宿。可視情況而定泉粉。
this.data[index].disabled = true;
- Vue.set修改數(shù)組的值连霉，要把當(dāng)前索引值對(duì)應(yīng)項(xiàng)重新替換
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')
];
}
}
以上，問(wèn)題解決嗡靡！
原創(chuàng)非轉(zhuǎn)跺撼，歡迎相互學(xué)習(xí)交流！
