Vue数据表格增删改查与表单验证代码详解
更新时间：2023年10月20日 09:17:17 作者：云村小威
这篇文章主要给大家介绍了关于Vue数据表格增删改查与表单验证的相关资料,Vue可以通过使用组件化的方式来实现表格的增删改查功能,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
一、CRUD实现
1.1 后台CRUD编写
package com.ycxw.ssm.controller;
@Controller
@RequestMapping("/book")
public class BookController {
@Autowired
private IBookService bookService;
@RequestMapping("/addBook")
@ResponseBody
public JsonResponseBody<?> addBook(Book book){
try {
bookService.insert(book);
return new JsonResponseBody<>("新增书本成功",true,0,null);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("新增书本失败",false,0,null);
}
}
@RequestMapping("/editBook")
@ResponseBody
public JsonResponseBody<?> editBook(Book book){
try {
bookService.updateByPrimaryKey(book);
return new JsonResponseBody<>("编辑书本成功",true,0,null);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("编辑书本失败",false,0,null);
}
}
@RequestMapping("/delBook")
@ResponseBody
public JsonResponseBody<?> delBook(Book book){
try {
bookService.deleteByPrimaryKey(book.getId());
return new JsonResponseBody<>("删除书本成功",true,0,null);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("删除书本失败",false,0,null);
}
}
@RequestMapping("/queryBookPager")
@ResponseBody
public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
try {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> books = bookService.queryBookPager(book, pageBean);
return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("分页查询书本失败",false,0,null);
}
}
}1.2 配置访问路径
src/api/action.js :
//获取书本信息 'BOOKMSG_BOOKINFO_REQ': '/book/queryBookPager', //新增书本 'BOOK_ADD': '/book/addBook', //修改书本 'BOOK_EDIT': '/book/editBook', //删除书本 'BOOK_DEL': '/book/delBook',
1.3 前端编写（及窗口）
<template>
<div class="Book" style="padding: 30px;">
<!-- 输入框搜索 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="书籍名称 : ">
<el-input v-model="bookname" placeholder="书籍名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="warning" @click="onSubmit()">查询</el-button>
<el-button type="warning" icon="el-icon-plus" @click="addBook()">新增</el-button>
</el-form-item>
</el-form>
<!-- 书籍的书籍表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="书籍ID"></el-table-column>
<el-table-column prop="bookname" label="书籍名称"></el-table-column>
<el-table-column prop="price" label="书籍价格"></el-table-column>
<el-table-column prop="booktype" label="书籍类型"></el-table-column>
<!-- “编辑”“删除”功能连接 -->
<el-table-column label="操作">
<!--
在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop
slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取
row对象信息和行索引index信息即可
-->
<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>
</el-table>
<!-- 分页 -->
<div class="block" style="padding: 20px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<!--
弹出窗口：增加和修改书本信息共用一个弹出窗口，需要根据用户的选择动态的设置弹出窗口的标题
:tile 通过绑定值的方式设置dialog的标题
:visible.sync 控制弹出窗口的显示或隐藏，.sync同步修饰符
@close="closeBookForm"，设置窗口关闭时调用的处理函数，可用于清空表单
:model="bookForm"：用于定义表单对应的model，具体model的定义可见data部分。
v-show="optiontype == 'update'" 通过操作类型控制是否显示书本编号字段，如果当前操作类型为
新增，则不用显示，书本编号在数据表中是自增的。
:label-width="formLabelWidth" 统一定义标签的宽度。
:style="{width: formEleWidth}" 统一定义form元素的宽度。
-->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
<el-form :model="bookForm" :rules="rules" ref="bookForm" :label-position="center">
<el-form-item v-show="optiontype == 'update'" label="编号" :label-width="formLabelWidth">
<el-input v-model="bookForm.id" autocomplete="off" :style="{width: formEleWidth}"></el-input>
</el-form-item>
<el-form-item label="书名" :label-width="formLabelWidth" prop="bookname">
<el-input v-model="bookForm.bookname" autocomplete="off" :style="{width: formEleWidth}"></el-input>
</el-form-item>
<el-form-item label="价格" :label-width="formLabelWidth" prop="price">
<el-input v-model="bookForm.price" autocomplete="off" :style="{width: formEleWidth}"></el-input>
</el-form-item>
<el-form-item label="类型" :label-width="formLabelWidth" prop="booktype">
<el-select v-model="bookForm.booktype" placeholder="选择类型" :style="{width:formEleWidth}">
<el-option label="名著" value="mz"></el-option>
<el-option label="小说" value="xs"></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="saveBook()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
:visible.sync="dialogFormVisible"
注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
@close="dialogClose"
1.4 增删改查实现
<script>
export default {
name: 'BookList',
data() {
return {
bookname: '',
tableData: [],
rows: 10,
total: 0,
page: 1,
//控制对话框是否显示，默认是隐藏状态
dialogFormVisible: false,
//统一控制标签的宽度
formLabelWidth: '40px',
//统一控制表单元素的宽度
formEleWidth: '400px',
//对话框标题，默认为新增，如果是点击修改按钮打开对话框，则标题应为修改。
dialogName: '新增书本',
//操作类型，默认为添加，如果是点击修改打开对话框，则操作类类型应变为修改
//该变量用于控制是否显示书本编号字段，当操作类型为新增时不需显示（书本编号数据表字段为自增）
//当操作类型为修改时，需要显示。
optiontype: 'add',
//定义表单对应的model
bookForm: {
id: '',
bookname: '',
price: null,
booktype: ''
}
}
},
methods: {
//选择分页
handleSizeChange(r) {
//当页大小发生变化
let params = {
bookname: this.bookname,
rows: r,
page: this.page
}
this.query(params);
},
//输入分页
handleCurrentChange(p) {
//当前页码大小发生变化
let params = {
bookname: this.bookname,
rows: this.rows,
// 分页
page: p
}
this.query(params);
},
//查询方法
query(params) {
//获取后台请求书籍数据的地址
let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
this.axios.get(url, {
params: params
}).then(d => {
this.tableData = d.data.rows;
this.total = d.data.total;
}).catch(e => {});
},
onSubmit() {
let params = {
bookname: this.bookname
}
console.log(params)
this.query(params);
this.bookname = ''
},
//当关闭对话框时，该方法用于清空表单
closeBookForm() {
this.bookForm.id = null;
this.bookForm.bookname = null;
this.bookForm.booktype = null;
this.bookForm.price = null;
},
//打开对话框，将对话框标题设置为新增，操作类型设置为'add'
addBook() {
this.dialogName = '新增书本信息';
this.dialogFormVisible = true;
this.optiontype = 'add';
},
//打开对话框，将对话框标题设置为修改，操作类型设置为'update'，
//并使用获取的待修改的记录的值设置对应的表单元素
handleEdit(row) {
this.dialogName = '编辑书本信息';
this.dialogFormVisible = true;
this.bookForm.id = row.id;
this.bookForm.bookname = row.bookname;
this.bookForm.booktype = row.booktype;
this.bookForm.price = row.price;
this.optiontype = 'update';
},
/* 新增书本 */
saveBook() {
//默认新增
var url = this.axios.urls.BOOK_ADD;
if (this.optiontype == 'update') {
url = this.axios.urls.BOOK_EDIT;
}
console.log(url)
this.axios.post(url, this.bookForm).then(d => {
//关闭窗口
this.closeBookForm();
this.dialogFormVisible = false;
this.query({});
}).catch();
},
//删除书本记录
handleDelete(row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//获取删除书本访问路径
var url = this.axios.urls.BOOK_DEL;
this.axios.post(url, {
id: row.id
}).then(r => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.query({});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
created() {
this.query({})
}
}
</script>1.4.1 新增示例
1.4.2 修改示例
1.4.3 删除示例
二、表单验证
2.1 设置表单验证属性
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
2.2 自定义验证规则
自定义验证规则，在data对象，return之前定义。定义完成后可在rules中使用，如下代码所示。
注意：
最后return时调用的callback，如果不调用则验证。
//定义验证规则
rules: {
bookname: [{
//是否必填
required: true,
//提示信息
message: '请输入书籍名称',
//事件
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
],
price: [{
required: true,
//自定义规则
validator: checkPrice,
trigger: 'blur'
}],
booktype: [{
required: true,
message: '请选择类型',
trigger: 'change'
}]
}2.3 使用规则
注意：
表单重置时必须先清空表单验证信息，再清空表单数据信息，通过form表单的ref属性来清空表单验证信息
this.$refs['bookForm'].resetFields();语法：
this.$refs['需要验证的表单名称'].validate((valid) => { if (valid) { //验证通过 alert('submit!'); } else { //验证失败 console.log('error submit!!'); return false; } });
/* 新增书本 */
saveBook() {
this.$refs['bookForm'].validate((valid) => {
if (valid) {
//默认新增
var url = this.axios.urls.BOOK_ADD;
if (this.optiontype == 'update') {
url = this.axios.urls.BOOK_EDIT;
}
console.log(url)
this.axios.post(url, this.bookForm).then(d => {
//关闭窗口
this.closeBookForm();
this.dialogFormVisible = false;
this.query({});
}).catch();
} else {
console.log('error submit!!');
return false;
}
});
},2.4 效果演示
总结
到此这篇关于Vue数据表格增删改查与表单验证的文章就介绍到这了,更多相关Vue增删改查与表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
懒加载是一种网页优化技术，也被称为延迟加载，它的主要目的是在网页加载时，只加载当前可见区域内的内容，而延迟加载其他不可见区域的内容，从而提高网页的加载速度和性能，这篇文章主要介绍了vue图片懒加载的两种方法,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue打印错误日志问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue element el-select下拉滚动加载的方法
很多朋友都遇到这样一个问题在使用vue+element的el-select下拉框加载返回数据太多时，会造成卡顿，用户体验欠佳，这篇文章主要介绍了vue element el-select下拉滚动加载方法,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了vue实现在线翻译功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
v-model 可以实现双向绑定的效果,允许父组件控制子组件的显示/隐藏,同时允许子组件自己控制自身的显示/隐藏,本文给大介绍Vue 使用v-model实现控制子组件显隐,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了vue属性props默认类型的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3中createWebHistory和createWebHashHistory的区别详析
这篇文章主要给大家介绍了关于Vue3中createWebHistory和createWebHashHistory区别的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue中props报错问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vite+vue3项目中svg图标组件封装的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了vue 二维码长按保存和复制内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论