isSet属性值改变后,但表格数据未响应式改变

问题描述:

在做修改表格中数据时,修改数据完成后,发现点击保存按钮后,表格状态未改变,打印显示isSet确实已经变为false
html部分
  <span class="el-tag el-tag--mini" style="cursor: pointer;"
            @click="detailChange(scope.row,scope.$index,true)">
                          {{scope.row.isSet?'保存':"修改"}}
  </span>

js部分

detailChange(row, index, cg) {
      //点击修改 判断是否已经保存所有操作
      for (let i of this.papbank.detail) {
        if (i.isSet && i.id != row.id) {
          this.$message.warning("请先保存当前编辑项");
          return false;
        }
      }
      //是否是取消操作
      if (!cg) {
        console.log("取消操作")
        if (!this.papbank.sel.id) this.papbank.detail.splice(index, 1);
        this.$emit("saveDetail",this.papbank.detail);
        return row.isSet = !row.isSet;
      }
      //提交数据
      if (row.isSet) {
          let data = JSON.parse(JSON.stringify(this.papbank.sel));
          for(let k in data){
            row[k] = data[k]
          }
          this.$emit("saveDetail",this.papbank.detail);
          
          row.isSet = false;
          this.$message({
            type: 'success',
            message: "保存成功!"
          });
          console.log(row.isSet)
      } else {
        this.papbank.sel = JSON.parse(JSON.stringify(row));
        row.isSet = true;
      }
    },

保存后状态未改变


解决方案:

只需要在js中加入这样一段代码就可以了

this.$set(row, row.isSet, false)

完整js部分

detailChange(row, index, cg) {
      //点击修改 判断是否已经保存所有操作
      for (let i of this.papbank.detail) {
        if (i.isSet && i.id != row.id) {
          this.$message.warning("请先保存当前编辑项");
          return false;
        }
      }
      //是否是取消操作
      if (!cg) {
        console.log("取消操作")
        if (!this.papbank.sel.id) this.papbank.detail.splice(index, 1);
        this.$emit("saveDetail",this.papbank.detail);
        return row.isSet = !row.isSet;
      }
      //提交数据
      if (row.isSet) {
          let data = JSON.parse(JSON.stringify(this.papbank.sel));
          for(let k in data){
            row[k] = data[k]
          }
          this.$emit("saveDetail",this.papbank.detail);

         	row.isSet = false;

          	this.$set(row, row.isSet, false)

          this.$message({
            type: 'success',
            message: "保存成功!"
          });

      } else {
        this.papbank.sel = JSON.parse(JSON.stringify(row));
        row.isSet = true;
      }
    },
    

头疼很一会,也是感谢这位老哥
有遇到和我同样问题的小伙伴,可以看看:
vue中this.$set的用法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值