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

问题:点击表格按钮打开弹窗,同时修改按钮的disabled=true,关闭弹窗,修改按钮的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赋值,是用于弹窗关闭的时候,能动态修改编辑行按钮的状态。这里涉及到一个深拷贝,浅拷贝的问题,浅拷贝复制的是引用(修改uploadInvoice,item也跟着变化);深拷贝复制的是实体(uploadInvoice是一个独立的个体,修改uploadInvoice,item不变),写法JSON.parse(JSON.stringify(item)),网上是这么说的,我也没试过。

//弹窗关闭事件 uploadInvoice现在是引用的item,因此item.INdisabled也会改变
changeVisible(){
      this.$set(this.uploadInvoice,'INdisabled',false);//按钮恢复状态
    },

你可能感兴趣的