美文网首页LOVETOO-前端编程
element-ui弹窗组件再次打开时残留上次打开时的数据

element-ui弹窗组件再次打开时残留上次打开时的数据

作者: 车文烨 | 来源:发表于2020-09-20 14:11 被阅读0次

原因:vue指令v-if具有缓存效果,上次打开保存的数据依然保留着;

解决:在dialog关闭的时候清除数据,

this.$refs[formRef].resetFields();
Object.assign(this.$data, this.$options.data.call(this));

可以封装为全局方法:

// 重置表单,formRef为表单的ref值,excludeFields为要排除重新初始化值得属性
Vue.prototype.$reset = function (formRef, ...excludeFields) {
  this.$refs[formRef].resetFields();
  let obj1 = this.$data;
  let obj2 = this.$options.data.call(this);
  if (!excludeFields || excludeFields.length === 0) {
    excludeFields = ["ruleValidate"];
  }
  for (let attrName in obj1) {
    if (excludeFields && excludeFields.includes(attrName)) {
      continue;
    }
    obj1[attrName] = obj2[attrName];
  }
};

相关文章

网友评论

    本文标题:element-ui弹窗组件再次打开时残留上次打开时的数据

    本文链接:https://www.haomeiwen.com/subject/rqzuyktx.html