笔记-vue弹窗表单 element-ui验证提示语(残留)清除

本文链接：https://blog.youkuaiyun.com/aliceyang2012/article/details/131703755

在Vue.js应用中，遇到一个弹窗表单校验的问题，当使用el-checkbox-group进行多选校验时，关闭并重新打开弹窗，之前的校验状态仍然保留。通过在watch中监听showDialog，并在关闭弹窗时调用resetFields()方法，成功解决了这个问题，确保弹窗每次打开时校验状态能正确重置。

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

新建打开弹窗，弹窗里是表单，有输入框，单选框，下拉框，多选，用传统方式的rules加校验，其他都没啥问题，但是el-checkbox-group比较怪，关闭弹窗再打开时，校验仍在，百度一顿收索尝试，大多无效，有一个竟然可以，mark下~

如图（一开打就有提示了，当然不行）

<el-dialog
      title="设备编辑"
      width="40%"
      top="2rem"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :destroy-on-close="true"
      @close="close()"
    >
      <div id="shared" style="margin-top: 1rem;margin-right: 100px;">
        <el-row>
          <el-col :span="24">
        <el-form ref="form" :rules="rules" :model="form" label-position="right" label-width="110px">
          <el-row>
<el-col :span="24">
              <el-form-item label="静态过滤" prop="staticFilter">
                <el-checkbox-group v-model="form.staticFilter" :max="2">
                  <el-checkbox v-for="(item,index) in groupList" :key="index" :label="item.id" >{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
</el-form>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

data() {
    return {
      groupList: [
        {id:1,name:'人体静态过滤'},
        {id:2,name:'烟强化过滤'},
        {id:3,name:'火强化过滤'},
        {id:4,name:'烟火逻辑过滤'},
      ],
      form: {
        enableStatus: 0,
        deviceType: 0,
        staticFilter: [],
      },
      rules: {
        staticFilter: [{type: 'array', required: true, message: "请选择静态过滤", trigger: "change"}],
      },
    };
  },
  watch: {
    showDialog: function (val,oldVla) {
      if (this.$refs['form'] !== undefined) {
        this.$refs["form"].resetFields();
      }
    }
  },
methods: {
close: function () {
      this.showDialog = false;
      this.$refs.form.resetFields();
    },
}

起关键性作用的是watch，showDialog 对应 el-dialog 中的:visible.sync="showDialog"