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;
},
5、在父组件中调用子组时,需要绑定这个id,当为编辑时候给id赋值this.modityid = row.id;;新增时,id为空
6、当打开编辑弹窗时,赋值代码写:this.updateObject = Object.assign({},row);这么写的目的是为了避免深拷贝造成的麻烦,就是当弹窗上的值变化时候,表格数据也变化,主要解决这个问题。updateObject为绑定在子组件上的数据