关于element-ui关闭dialog右上角关闭按钮，表单校验依然提示解决方法

最新推荐文章于 2023-12-25 14:03:43 发布

原创最新推荐文章于 2023-12-25 14:03:43 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #elementui

文章展示了如何在Vue.js的el-dialog组件中将close方法绑定到取消按钮上，用于关闭对话框操作。对话框包含一个表单用于修改密码，并有确认和取消两个按钮，点击取消按钮会触发btnCancel方法。

部署运行你感兴趣的模型镜像

在这里插入图片描述
给dialog组件绑定close方法为取消按钮方法

<el-dialog width="500px" title="修改密码" :visible.sync="showDialog" @close="btnCancel">
      <el-form ref="passForm" label-width="120px" :model="passForm" :rules="rules">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passForm.oldPassword" show-password size="small" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passForm.newPassword" show-password size="small" />
        </el-form-item>
        <el-form-item label="重复密码" prop="confirmPassword">
          <el-input v-model="passForm.confirmPassword" show-password size="small" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="btnOK">确认修改</el-button>
          <el-button size="mini" @click="btnCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>