element-plus el-drawer 在关闭抽屉时同时清空表单数据

Element Plus 的 `el-drawer` 组件是一个侧边栏抽屉，通常用于展示额外的内容或者导航菜单。如果你希望在用户关闭抽屉时自动清空表单数据，你可以通过监听 `el-drawer` 的关闭事件(`@close`) 来实现这个功能。

首先，确保你的表单组件已经绑定了一个 `ref` 对象，以便操作其实例：

<template>
  <el-drawer
    :visible.sync="drawerVisible"
    @close="handleDrawerClose"
  >
    <!-- 抽屉内容 -->
    <your-form ref="formRef"></your-form>
  </el-drawer>
</template>

<script>
import YourForm from './YourForm.vue';

export default {
  components: {
    YourForm,
  },
  data() {
    return {
      drawerVisible: false,
      formRef: null,
    };
  },
  methods: {
    handleDrawerClose() {
      // 当抽屉关闭时，清空表单数据
      if (this.formRef) {
        this.formRef.reset(); // 使用 reset 方法清空 Vue 表单
      }
    },
  },
};
</script>

在这个例子中，`handleDrawerClose` 方法会在抽屉关闭时被调用，然后它会访问 `formRef` 并调用 `reset` 函数，这将清除表单的所有字段值。