本文介绍了在Vue中实现CUD操作（创建、更新、删除）配合表单验证的详细步骤，包括后台数据接口的准备、Dialog弹出框的使用、表单的基本结构和验证规则的设定。通过实例展示了如何在关闭Dialog时清空表单数据和验证信息，以及如何进行表单重置和验证。文章还提到了在多个表单场景下如何区分不同的验证规则，并给出了完整的代码示例。
后台数据接口准备
增删改接口
/**
* 新增书本
* @param book
* @return
*/
public void addBook(Book book) {
String sql="insert into t_book_vue(bookname,price,booktype) values(?,?,?)";
super.executeUpdate(sql, new Object[] {
book.getBookname(),
book.getPrice(),
book.getBooktype()
});
}
/**
* 编辑书本
* @param book
* @return
*/
public void editBook(Book book) {
String sql="update t_book_vue set bookname=?,price=?,booktype=? where id=?";
super.executeUpdate(sql, new Object[] {
book.getBookname(),
book.getPrice(),
book.getBooktype(),
book.getId()
});
}
/**
* 删除书本
* @param book
*/
public void delBook(Book book) {
String sql="delete from t_book_vue where id=?";
super.executeUpdate(sql, new Object[] {
book.getId()
});
}Dialog弹出框
基本结构
<el-dialog :title="title"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
@close="dialogClose">
<el-form :model="book" :rules="rules" ref="book">
<el-form-item label="书本编号" :label-width="formLabelWidth">
<el-input readonly="readonly" v-model="book.id" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
<el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
<el-input v-model="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
<el-select style="width:100%" v-model="book.booktype" placeholder="请选择书本类型">
<el-option label="玄幻" value="玄幻"></el-option>
<el-option label="计算机" value="计算机"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
:visible.sync="dialogFormVisible"
注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
@close="dialogClose"
表单
基本结构
<el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
<el-form-item label="书本编号" :label-width="formLabelWidth">
<el-input v-model="bookForm.id" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
<el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
</el-form-item>
...
</el-form>注1：:label-position设置表单对齐方式
注2：<el-form :model="bookForm"></el-form>设置表单元素属性双向绑定的对象属性名称
data: function() {
return {
bookForm: {
id: null,
bookname: null,
price: '',
booktype: null
}
};
}表单验证
<el-form :model="bookForm" :rules="rules" ref="bookForm">
...
</el-form>
注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则
//将el-form-item的prop属性设置为需校验的字段名即可,如下：
<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
<el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
</el-form-item>
在Vue实例的data属性中定义表单验证规则，如下：
rules: {
bookname: [
{ required: true, message: '请输入书本名称', trigger: 'blur' },
],
price: [
{ required: true, message: '请输入书本价格', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
price: [
{ required: true, message: '请选择书本类型', trigger: 'change' },
],
} 注2：有多个表单，怎么在提交进行区分？
我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用
注3：清空表单验证信息
this.$refs[formName].resetFields();补充说明：formName是指<el-form ref="bookForm">中定义的ref属性名
//清空表单验证
this.$refs['book'].resetFields();注4：表单重置时必须先清空表单验证信息，再清空表单数据信息
//通过form表单的ref属性来清空表单验证信息
this.$refs['bookForm'].resetFields();
//清空上一次表单的数据信息
this.bookForm.id = null;
this.bookForm.bookname = null;
this.bookForm.price = null;
this.bookForm.booktype = null;
新增页面框：
CUD
新增
在事件中设置dialogFormVisible="true"即可打开dialog弹出框
data:function(){
return{
bookname:'',
tableData:[],
page:1,
rows:10,
total:0,
title:'新增书本',
dialogFormVisible:false,
book:{
id:'',
bookname:'',
price:'',
booktype:''
},
formLabelWidth:'100px',添加修改/删除按钮
methods:{
//书本编辑
handleEdit:function(row){
//设置对话框为显示状态
this.dialogFormVisible=true;
//设置标题为编辑书本
this.title="编辑书本";
//赋值表单数据
this.book={
id:row.id,
bookname:row.bookname,
price:row.price,
booktype:row.booktype
};
},
//书本删除
handleDelete:function(row){
this.$confirm('亲，确认删除该书本信息吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let url=this.axios.urls.BOOK_MANAGER;
let params={
id:row.id,
methodName:'delBook'
};
this.axios.post(url,params).then(resp=>{
let data=resp.data; //{success:,msg:''}
this.$message({
message: data.msg,
type: data.success==true?'success':'error',
});
if(data.success){
//刷新数据列表
this.query(this.page);
}
}).catch(err=>{
console.log(err);
});
}).catch(() => {});
},//对话框的关闭事件
dialogClose:function(){
//清空表单数据
this.book={
id:'',
bookname:'',
price:'',
booktype:''
};
//清空表单验证
this.$refs['book'].resetFields();
//重置对话框标题
this.title="新增书本";
},
//对话框的打开事件
open:function(){
this.dialogFormVisible=true;
},
//新增或编辑的保存事件
save:function(){
this.$refs['book'].validate((valid) => {
if (valid) {
//定义请求路径
let url=this.axios.urls.BOOK_MANAGER;
let methodName="addBook";
if(this.title=="编辑书本")
methodName="editBook";
//定义请求参数
//this.book -> {id:'',bookname:'',methodName:''}
this.book['methodName']=methodName;
//发送ajax请求
this.axios.post(url,this.book).then(resp=>{
let data=resp.data; //{success:,msg:''}
this.$message({
message: data.msg,
type: data.success==true?'success':'error',
});
if(data.success){
//关闭对话框
this.dialogFormVisible=false;
//刷新数据列表
this.query(this.page);
}
}).catch(err=>{
console.log(err);
});
} else {
console.log('error submit!!');
return false;
}
});
},在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop
slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取row对象信息和行索引index信息即可
<el-table-column label="操作">
<!-- 插槽 -->
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>编辑页面框：
删除提示页面框：
最后页面如下图：
至此,CUD+表单验证介绍完毕,由于作者水平有限难免有疏漏，欢迎留言纠错。
扫一扫
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
