CUD+表单验证

目录

对话框

表单验证 

修改 

删除

---

1.后台数据接口准备
   增删改接口 

添加一个新增的按钮

对话框

close-on-click-modal

是否可以通过点击 modal 关闭 Dialog，默认true

 注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
    
  注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose" 

 

表单验证 

通过 rules 属性传入约定的验证规则，prop 属性设置为需校验的字段名即可

ref="book" 区分判断表单验证是哪一个 

清空表单验证（放到对话框关闭事件）
this.$refs['book'].resetFields();

 

修改 

  

在表单添加两个按钮 

 

删除

 

<template>
  <div class="div-main">
    <!-- 1）面包屑，路径导航