这是一个弹窗

 我编辑之后点了确定，可是再次打卡这个弹窗时还是有我刚刚输入的数据

这可怎么解决

关闭弹窗再次打开，还有刚刚输入的值，那么是不是就应该写个关闭弹窗时候的方法让他清空这个表单

其实我们只需要在弹窗el-dialog上面@close="handleClose（这个随便起）"，然后在再methods中写上就好了。

<template>
  <el-button type="primary" @click="aaa = true">打开</el-button>
  <el-dialog v-model="aaa" title="这是一个弹窗" @close="handleClose">
    <el-form :model="addlist">
      <el-form-item label="姓名:" prop="name" :label-width="formLabelWidth">
        <el-input v-model="addlist.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址:" prop="address" :label-width="formLabelWidth">
        <el-input v-model="addlist.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄:" prop="age" :label-width="formLabelWidth">
        <el-input v-model="addlist.age" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="aaa = false">取消</el-button>
        <el-button type="primary" @click="aaa = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
const aaa = ref(false)
const formLabelWidth = '140px'
const addlist =
{
  name: "",
  age: "",
  address: ""
};

export default {
  data() {
    return {
      aaa,
      formLabelWidth,
      addlist,
    };
  },
  methods: {
    handleClose() {
      for (let key in this.addlist) {
        this.addlist[key] = ' ';
      }
    }
  },
};
</script>

<style>

</style>

但是这种情况有一个缺点 就是如果你的输入框中写了 placeholder="" 那么你再次打开弹窗时默认内容也会给清除掉 这个很讨厌

 其实要这样做就可以

<template>
  <el-button type="primary" @click="aaa = true">打开</el-button>
  <el-dialog v-model="aaa" title="这是一个弹窗" @close="handleClose">
    <el-form :model="addlist" ref="closeaddlist">
      <el-form-item label="姓名:" prop="name" :label-width="formLabelWidth">
        <el-input v-model="addlist.name" autocomplete="off" placeholder="111111111" />
      </el-form-item>
      <el-form-item label="地址:" prop="address" :label-width="formLabelWidth">
        <el-input v-model="addlist.address" autocomplete="off" placeholder="222222222" />
      </el-form-item>
      <el-form-item label="年龄:" prop="age" :label-width="formLabelWidth">
        <el-input v-model="addlist.age" autocomplete="off" placeholder="33333333333" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="aaa = false">取消</el-button>
        <el-button type="primary" @click="aaa = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
const aaa = ref(false)
const formLabelWidth = '140px'
const addlist =
{
  name: "",
  age: "",
  address: ""
};

export default {
  data() {
    return {
      aaa,
      formLabelWidth,
      addlist,
    };
  },
  methods: {
    handleClose() {
      this.aaa = false   //关闭对话框
      this.$refs.closeaddlist.resetFields();        //重置表单
    }
  },
};
</script>

<style>

</style>