3、新增、编辑弹窗出现的问题
编辑弹窗修改数据后,点击取消,表格数据变化;编辑弹窗修改后,不做任何操作,点击下一条数据进行编辑,取消,数据被上一条覆盖,需要刷新页面才能还原;新增和修改弹窗的数据发生紊乱等等问题的解决方法
1、组件弹窗中的props定义
props: { ObjectData: { require: true, type: Object, default: () => {} }, // 传入编辑id modityId:{ type: String, required: false, default: '' }, //弹窗的显示 visible: { type: Boolean, required: false, default: false }, },
2、return data数据定义
// 校验规则
rules: { function: [ {required: true, message: 'Please enter 【Function】', trigger: 'blur'} ] },
// 搜索条件 searchType:{ function:'', subFunction:'', area:'' },
3、编写监听事件
watch:{ visible: { handler(n, o) { // debugger; if (n && this.ObjectData.id) { this.modityData(this.modityId) this.searchType = this.ObjectData; } else if ((this.$refs['form'] && !this.modityId)) { this.$refs['form'].resetFields(); this.searchType = { function: '', subFunction: '', area: '' }; } }, deep: true, immediate: true } },
4、编写方法
// 编辑表单数据有id
modityData(id){
this.searchType.id = id;
},
扫描二维码关注公众号,回复:
6234488 查看本文章
5、在父组件中调用子组时,需要绑定这个id,当为编辑时候给id赋值this.modityid = row.id;;新增时,id为空
6、当打开编辑弹窗时,赋值代码写:this.updateObject = Object.assign({},row);这么写的目的是为了避免双向数据绑定造成的麻烦,就是当弹窗上的值变化时候,表格数据也变化,主要解决这个问题。updateObject为绑定在子组件上的数据