当前位置: 首页 > Web前端 > JavaScript

VUE:第一篇 elementUI表格 点击按钮,修改表格单行数据;关闭弹窗,修改表格单行数据

时间:2023-03-27 12:19:31 JavaScript

VUE:点击第一个elementUI表格中的按钮,修改表格单行数据;关闭弹窗,修改表格单行数据disabled=false。知识点:1、this.$set(item,'INdisabled',false):使用$set,这样添加的属性是响应式的,否则无论怎么修改,显示的数据都不会改变!2.深拷贝,浅拷贝注意:加载表单数据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赋值,用于动态修改编辑行按钮状态弹出窗口关闭。这就涉及到深拷贝和浅拷贝。浅拷贝复制reference(修改uploadInvoice,item也变);深拷贝复制entity(uploadInvoice为独立个体,修改uploadInvoice,item不变),写法为JSON。parse(JSON.stringify(item)),网上是这么说的,我没试过。//弹窗关闭事件uploadInvoice现在是引用的item,所以item.INdisabled也会改变changeVisible(){this.$set(this.uploadInvoice,'INdisabled',false);//按钮恢复状态},