问题描述:
在做修改表格中数据时,修改数据完成后,发现点击保存按钮后,表格状态未改变,打印显示isSet确实已经变为falsehtml部分
<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的用法