问题:点击表格按钮打开弹窗,同时修改按钮的disabled=true,关闭弹窗,修改按钮的disabled=false。
知识点:
1、this.$set(item,'INdisabled',false):使用$set,这样添加的属性才是响应式,否则无论怎么修改,都不会改变已经展示的数据!
2、深拷贝,浅拷贝
<el-table
:data="invoiceRecord"
border
stripe
ref="multipleTable"
tooltip-effect="dark"
style="width: 100%; overfolow: hidden"
>
<el-table-column
label="编号"
type="index"
align="center"
width="65">
</el-table-column>
<el-table-column
prop="address"
label="操作"
fixed="right"
align="center"
>
<template slot-scope="scope">
<el-button :disabled="scope.row.INdisabled"
v-if="scope.row.SM_ID == 0 "
class="upload"
size="mini"
type="danger"
@click="getContractInvoiceId(scope.row)"
>上传</el-button>
</template>
</el-table-column>
</el-table>
注:加载表格数据invoiceRecord的时候,手动添加了INdisabled属性
this.invoiceRecord.find((item, index) => {
//注意使用$set,这样添加的属性才是响应式,否则不管用!
//item.INdisabled=false;//这种写法不具有响应式,即使表格数据修改,表格展示的还是原来的数据
this.$set(item,'INdisabled',false)
if(item.IIM_IsFlag==0){
this.$set(item,'INdisabled',true);
}
})
//上传点击事件
getContractInvoiceId(item){
this.$set(item,'INdisabled',true);
// item.INdisabled=true;
this.uploadInvoice=item;//浅拷贝,用于关闭弹窗修改disabled
},
上面点击事件,给变量uploadInvoice赋值,是用于弹窗关闭的时候,能动态修改编辑行按钮的状态。这里涉及到一个深拷贝,浅拷贝的问题,浅拷贝复制的是引用(修改uploadInvoice,item也跟着变化);深拷贝复制的是实体(uploadInvoice是一个独立的个体,修改uploadInvoice,item不变),写法JSON.parse(JSON.stringify(item)),网上是这么说的,我也没试过。
//弹窗关闭事件 uploadInvoice现在是引用的item,因此item.INdisabled也会改变
changeVisible(){
this.$set(this.uploadInvoice,'INdisabled',false);//按钮恢复状态
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。