接上篇的数据表格与分页，今天我们给表格中的数据增删改与表单验证
后端接口
Web层
private Book book=new Book();
private BookDao bookDao=new BookDao();
private ObjectMapper mapper=new ObjectMapper();
@Override
public Book getModel() {
return book;
}
public String queryBookPager(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> books = bookDao.queryBookPager(book, pageBean);
Map<String,Object> map=new HashMap<String,Object>();
Map<String,Object> data=new HashMap<String,Object>();
data.put("rows", books);
data.put("total", pageBean.getTotal());
map.put("data", data);
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
/**
* 新增
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String addBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
bookDao.addBook(book);
Map<String,Object> map=new HashMap<String,Object>();
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
/**
* 修改
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String editBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
bookDao.UpdateBook(book);
Map<String,Object> map=new HashMap<String,Object>();
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
/**
* 删除
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String deleteBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
bookDao.deleteBook(book);
Map<String,Object> map=new HashMap<String,Object>();
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}新增
在上一篇中的查询按钮后再加入一个新增按钮，用来打开新增的Dialog 对话框
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
<el-button type="success" icon="el-icon-plus" @click="open">新增</el-button>
</el-form-item>添加对话框，在ElementUI官网找到自定义对话框
<el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="dialogClose">
<el-form :model="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 label="书本名称" :label-width="formLabelWidth">
<el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书本价格" :label-width="formLabelWidth">
<el-input v-model="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item 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>在这里新增和修改共用一个页面
:visible.sync="dialogFormVisible" 用来控制对话框的显示和隐藏
dialogFormVisible值为 true/false
:close-on-click-modal="false" 防止用户误点击对话框外的地方导致对话框关闭
@close="dialogClose" 此方法用于清空上一次打开对话框输入的数据
:label-width="formLabelWidth" 设置文本框的宽度
数据属性定义
data: function() {
return {
bookname: '',
tableData: [],
page: 1,
rows: 8,
total: 0,
title: '书本新增',
book: {
id: '',
bookname: '',
price: '',
booktype: ''
},
dialogFormVisible: false,
formLabelWidth: '100px'
}
},对话框的打开与关闭事件
//对话框打开事件
open: function() {
this.dialogFormVisible = true;
},
//对话框关闭事件
dialogClose:function(){
//清空表单数据
this.book={
id: '',
bookname: '',
price: '',
booktype: ''
};
//清空表单验证
this.$refs['book'].resetFields();
//重置对话框标题
this.title='书本新增';
},确定按钮
修改和确定共用一个对话框 ，在此判断标题并对其执行方法进行改变
save:function(){
//表单验证
this.$refs['book'].validate((valid) => {
if (valid) {
//请求路径
let url=this.axios.urls.QUERY_BOOK;
let methodName='addBook';
console.log(this.title);
if(this.title=='编辑书本'){
methodName='editBook';
}
//请求参数
this.book['methodName']=methodName;
//发送axios请求
this.axios.post(url,this.book).then(resp=>{
let data=resp.data;
console.log(resp);
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;
}
});
}表单验证
找到官方文档中的表单验证
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
定义验证规则
rules: {
bookname: [
{ required: true, message: '请输入书本名称', trigger: 'blur' },
],
price: [
{ required: true, message: '请输入书本价格', trigger: 'blur' },
],
booktype: [
{ required: true, message: '请选择书本类型', trigger: 'change' },
],
}然后给表单使用验证
<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>在表单上添加rules 和ref属性 rules代表定义的验证规则 ref代表一个唯一的id一样
在每一个需要验证的标签中添加prop属性，prop="此处的名字，必须与rules中定义的属性一致"
修改
首先在官方文档中找到表格中的自定义列模板
<!-- 数据表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="书本编号" width="180">
</el-table-column>
<el-table-column prop="bookname" label="书本名称" width="180">
</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="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>方法定义
//书本编辑
handleEdit:function(row){
//设置标题为编辑书本
this.title='编辑书本';
//设置对话框显示
this.dialogFormVisible = true;
//赋值表单数据
this.book={
id: row.id,
bookname: row.bookname,
price: row.price,
booktype: row.booktype
}
}然后在关闭对话框中我们需要重置对话框的标题和数据以及表单验证
//对话框关闭事件
dialogClose:function(){
//清空表单数据
this.book={
id: '',
bookname: '',
price: '',
booktype: ''
};
//清空表单验证
this.$refs['book'].resetFields();
//重置对话框标题
this.title='书本新增';
}这里不能直接使用参数row给book赋值，因为数据是双向绑定的
当我直接使用row给book赋值时,就会出现以下情况
先编辑38号书本
然后我们打开下面书本的编辑按钮并直接关闭对话框
在这里就实现了数据双向绑定
删除
定义删除方法
handleDelete:function(row){
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let url=this.axios.urls.QUERY_BOOK;
let params={
id:row.id,
methodName:'deleteBook'
};
//发起axios请求
this.axios.post(url,params).then(resp=>{
let data=resp.data;
console.log(resp);
this.$message({
message: data.msg,
type: data.success==true?'success':'error'
});
if(data.success){
//刷新页面
this.query(this.page);
}
}).catch(err=>{
console.log(err);
});
}).catch(() => {});
}id为40的书本被删除了
至此vue+ElementUI实现动态树+数据表格+分页介绍完毕,由于作者水平有限难免有疏漏，欢迎留言纠错。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
