持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情
上一篇文章中我们引入了ElMessage用来提醒用户以及创建好了表单校验规则rules以及绑定好了submit提交事件，接下来我们将点击提交来判断用户输入的是否符合校验规则了。
- 创建好的submitForm方法里面传递formEl，如果formEl的validate符合rules则通过检验，否则提示用户请输入正确的信息，这个方法的具体代码如下所示：
const submitForm = (formEl) => {
formEl.validate((res) => {
if (!res) {
open4();
} else {
dialogFormVisible.value = false;
}
});
};
- 这里面调用的open4是之前引入的ElMessage中的方法，它用来提醒用户请填写正确信息！！！，类似的alert的效果，它的具体代码如下所示：
const open4 = () => {
ElMessage.error("请填写正确信息！！！");
};
- 到此为止这个提交按钮的功能就完成了，如果用户填写的信息不正确就会在窗口上提示用户请填写正确的信息，具体的效果如下图所示：
- 接下来完成取消按钮的功能，用户点击取消则关闭对话框，这个比较简单，具体的代码如下所示：
const dialogFormVisible = ref(false);
- 然后还有删除用户的删除按钮功能，点击删除后弹出一个对话框，提示用户是否要删除这个用户，我们需要用到element-plus的组件，具体的样式如下所示：
- 我们需要在删除按钮这绑定一个事件@click="handleDelete(scope.$index, scope.row)"，然后这个事件的具体代码如下所示：
