vue elementui表单清空前一次的数据

最新推荐文章于 2024-01-29 12:00:06 发布

weixin_46370867

最新推荐文章于 2024-01-29 12:00:06 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： element Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/115768867

Vue 同时被 2 个专栏收录

43 篇文章

订阅专栏

element

7 篇文章

订阅专栏

本文介绍如何在Vue Element UI的弹窗表单中实现每次打开时清空之前选择的数据，确保用户看到的是空白的表单。通过在`handleOpenModal`方法中重置`ruleForm`数据来达到此目的，确保每个字段如学院、系、年级等都被清空。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言

在使用vue elementui写表单的时候，选中了表单的数据后直接关闭表单（没有点击“取消”或“保存”按钮）；但是当第二次打开表单的时候，发现选中的数据还在，这是需要清空前一次选中的数据

我写的表单是在弹框里的，效果如下
在这里插入图片描述

关键部分

在每一次打开弹框的时候，都清空数据：

handleOpenModal() {
    this.ruleForm = {
      college: "",
      xi: "",
      grade: "",
      major: "",
      class: "",
      studentstatus: "",
    };
  },

参考代码

html

  <ModalComponent
    name="import-batchedit"
    title="批量编辑"
    size="85%"
    width="700px"
    @opened="handleOpenModal"
    @close="handleCloseMOdal"
  >
    <div class="cont">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学院" prop="college">
          <el-select
            v-model="ruleForm.college"
            placeholder="请选择学院"
            style="width: 550px"
          >
            <el-option label="河北软件" value="hbsoftware"></el-option>
            <el-option label="河北科技" value="hbtechnology"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="系" prop="xi">
          <el-select
            v-model="ruleForm.xi"
            placeholder="请选择所在系"
            style="width: 550px"
          >
            <el-option label="软件技术" value="softwaretechnology"></el-option>
            <el-option label="数字媒体" value="digitalmedia"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="年级" prop="grade">
          <el-select
            v-model="ruleForm.grade"
            placeholder="请选择所在年级"
            style="width: 550px"
          >
            <el-option label="2021" value="twozerotwoone"></el-option>
            <el-option label="2020" value="twozerotwozero"></el-option>
            <el-option label="2019" value="twozeroonenine"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="专业" prop="major">
          <el-select
            v-model="ruleForm.major"
            placeholder="请选择专业"
            style="width: 550px"
          >
            <el-option label="前端开发" value="web"></el-option>
            <el-option label="python开发" value="python"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="行政班级" prop="class">
          <el-select
            v-model="ruleForm.class"
            placeholder="请选择行政班级"
            style="width: 550px"
          >
            <el-option label="2020前端02" value="web"></el-option>
            <el-option label="2020python开发01" value="python"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学籍状态" prop="studentstatus">
          <el-select
            v-model="ruleForm.studentstatus"
            placeholder="请选择请选择学籍状态"
            style="width: 550px"
          >
            <el-option label="在籍" value="absentee"></el-option>
            <el-option label="未注册" value="unregistered"></el-option>
            <el-option label="休学" value="outofschool"></el-option>
            <el-option label="已离校" value="leftschool"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <p>* 修改为休学、已离校，则该账号不可登录启嘉网。</p>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm('ruleForm')" style="margin-left: 350px"
            >取消</el-button
          >

          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </ModalComponent>

数据：

export default {
  data() {
    return {
      // 表单
      ruleForm: {
        college: "",
        xi: "",
        grade: "",
        major: "",
        class: "",
        studentstatus: "",
      },
      rules: {
        college: [
          {
            required: true,
            message: "请选择院系",
            trigger: "change",
          },
        ],
        xi: [
          {
            required: true,
            message: "请选择院系",
            trigger: "change",
          },
        ],
        grade: [
          {
            required: true,
            message: "请选择年级",
            trigger: "change",
          },
        ],
        major: [{ required: true, message: "请选择专业", trigger: "change" }],
        class: { required: true, message: "请选择行政班级", trigger: "change" },
        studentstatus: {
          required: true,
          message: "请选择学籍状态",
          trigger: "change",
        },
      },
    };
  },
  
};

方法：

  methods: {
  // 打开表单
  // 每次打开表单的时候都会清空数据
    handleOpenModal() {
      this.ruleForm = {
        college: "",
        xi: "",
        grade: "",
        major: "",
        class: "",
        studentstatus: "",
      };
    },
    // 关闭表单
    handleCloseMOdal() {},
    // 表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },