此方法試用所有需要重置數(shù)據(jù)的場景

el-dialog打開一次之后，再次打開之前的數(shù)據(jù)不會銷毀，依然存在。

我們需要在關(guān)閉后重新初始化數(shù)據(jù)。

重置表單的方法

this.$refs[formRef].resetFields();

有些數(shù)據(jù)不是表單中的數(shù)據(jù)，也需要重置。

難道一個(gè)個(gè)的重新手動賦值嗎？當(dāng)然可以，就是比較麻煩。好在vue幫我們保存了一份原始數(shù)據(jù)，直接把data復(fù)制為原始數(shù)據(jù)即可

this.$data = this.$options.data();

以上就可以正常運(yùn)行，
但是如果data中有表單驗(yàn)證相關(guān)，會導(dǎo)致控制臺出現(xiàn)報(bào)錯信息，如下面代碼中的ruleValidate，排除即可。

data () {
  return {
    dialogVisible: false,
    submitLoading: false,
    model: {
      id: 0,
      carCard: "",
      driver: "",
      remark: "",
    },
    ruleValidate: {
      carCard: {required: true, message: "不能為空", trigger: "blur"},
    },
  };
},

重置表單數(shù)據(jù)，使用的地方特別多，我們封裝為全局方法

//重置表單，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];
  }
};

使用方法

el-dialog的close事件總調(diào)用

<template>
  <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :title="model.id === 0 ? '新增車輛' : '編輯車輛'"
      class="car-edit"
      width="450px"
      top="5vh"
      @close="$reset('form')">
    <el-form ref="form"
             :model="model"
             :rules="ruleValidate"
             class="formFillWidth"
             label-width="50px">
      <el-form-item label="車牌" prop="carCard">
        <el-input v-model="model.carCard" placeholder="請輸入"/>
      </el-form-item>
      <el-form-item label="司機(jī)" prop="driver">
        <el-input v-model="model.driver" placeholder="請輸入"/>
      </el-form-item>
      <el-form-item label="備注" prop="remark">
        <el-input v-model="model.remark" placeholder="請輸入"/>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button :loading="submitLoading" type="primary" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>