共计 1389 个字符,预计需要花费 4 分钟才能阅读完成。
问题:点击表格按钮关上弹窗,同时批改按钮的 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);// 按钮复原状态
},
正文完