vue之ElementUI之CUD+表单验证

1.新增功能

先将地址加入actionjs

vue之ElementUI之CUD+表单验证_第1张图片

 将入新增按钮

vue之ElementUI之CUD+表单验证_第2张图片

 vue之ElementUI之CUD+表单验证_第3张图片

 在element官网找到代码模板新增窗体

vue之ElementUI之CUD+表单验证_第4张图片

 vue之ElementUI之CUD+表单验证_第5张图片

让窗口可见

vue之ElementUI之CUD+表单验证_第6张图片

 vue之ElementUI之CUD+表单验证_第7张图片

 

写清空方法

vue之ElementUI之CUD+表单验证_第8张图片

 

 新增/编辑提交到后台的数据

vue之ElementUI之CUD+表单验证_第9张图片

 添加成功的弹窗

vue之ElementUI之CUD+表单验证_第10张图片

 vue之ElementUI之CUD+表单验证_第11张图片

 2.编辑及删除修改功能

点击编辑按钮,需要回显数据到表单

 scope回显

 

vue之ElementUI之CUD+表单验证_第12张图片

 

//打开添加/编辑书籍信息的窗体

vue之ElementUI之CUD+表单验证_第13张图片

 vue之ElementUI之CUD+表单验证_第14张图片

 删除功能 

添加删除方法

vue之ElementUI之CUD+表单验证_第15张图片

vue之ElementUI之CUD+表单验证_第16张图片

 vue之ElementUI之CUD+表单验证_第17张图片

 3.表单验证

 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

vue之ElementUI之CUD+表单验证_第18张图片

 规则有多种

vue之ElementUI之CUD+表单验证_第19张图片

 在doSub方法中加入规则

vue之ElementUI之CUD+表单验证_第20张图片

 vue之ElementUI之CUD+表单验证_第21张图片

 

 

你可能感兴趣的:(vue.js,elementui,javascript)