elementUI编辑与新增弹窗结合表格常见bug解决方案

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为绑定在子组件上的数据