北京朝阳网站,嘉兴房产网站建设,重庆网站到首页排名,wordpress图片用相对路径文章目录 一、准备二、添加功能2.1 新增添加按钮2.2 添加弹出框2.3 data中添加内容2.4 methods中添加相关方法 三、编辑功能3.1 表格中添加编辑和删除按钮3.2 methods中添加方法3.3 修改methods中clear方法3.4 修改methods中的handleSubmit方法 四、删除书籍功能4.1 往methods的… 文章目录 一、准备二、添加功能2.1 新增添加按钮2.2 添加弹出框2.3 data中添加内容2.4 methods中添加相关方法 三、编辑功能3.1 表格中添加编辑和删除按钮3.2 methods中添加方法3.3 修改methods中clear方法3.4 修改methods中的handleSubmit方法 四、删除书籍功能4.1 往methods的handleDelete方法中添加内容 五、表单验证5.1 修改弹出层5.2 在data中添加变量值 一、准备
在action.js中添加对后台请求的地址
BOOK_ADD: /book/addBook, //书籍添加
BOOK_EDIT: /book/editBook, //书籍编辑
BOOK_DEL: /book/delBook, //书籍删除二、添加功能
2.1 新增添加按钮
templatediv stylepadding: 20px....//新增语句开始el-button typesuccess clickonAdd()新增/el-button//新增语句结束!-- 数据表格 --el-table :datatableData stylewidth: 100%...../el-table.../div
/template2.2 添加弹出框
!--添加删除的弹出框--
el-dialog title新增书籍 :visible.syncdialogFormVisibleel-form :modelbookel-form-item label书籍名称 :label-widthformLabelWidthel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 :label-widthformLabelWidthel-input v-modelbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类型 :label-widthformLabelWidthel-select v-modelbook.booktype placeholder请选择书籍类型el-option v-forby in booktypes :labelby.name :valueby.name :keyby.id/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickhandleCancel取 消/el-buttonel-button typeprimary clickhandleSubmit确 定/el-button/div
/el-dialog2.3 data中添加内容
book: {id: ,bookname: ,price: ,booktype:
},
dialogFormVisible: false,
formLabelWidth: 100px,
booktypes: [{id: 1, name: 玄幻}, {id: 2, name: 名著}, {id: 3, name: 计算机}],
title: 新增书籍2.4 methods中添加相关方法
clear(){this.dialogFormVisible false;this.book.booktype ;this.book.bookname ;this.book.price ;
},
onAdd() {this.dialogFormVisible true;
},
handleSubmit(){let url this.axios.urls.BOOK_ADD;let params {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}this.axios.post(url,params).then(resp{if(resp.data.success){this.$message({message: resp.data.msg,type: success});this.clear();let params {bookname: this.bookname}this.query(params);}else{this.$message({message: resp.data.msg,type: error})}}).catch(err{})
},
handleCancel(){this.clear();
},三、编辑功能
3.1 表格中添加编辑和删除按钮
el-table-column label操作template slot-scopescopeel-button sizeminiclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-button sizemini typedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template
/el-table-column3.2 methods中添加方法
handleDelete(idx, row) {},
handleEdit(idx, row) {this.dialogFormVisible true;this.book.id row.id;this.book.bookname row.bookname;this.book.booktype row.booktype;this.book.price row.price;this.title 编辑书籍;
},3.3 修改methods中clear方法
clear() {this.dialogFormVisible false;this.book.booktype ;this.book.bookname ;this.book.price ;this.title ;
},3.4 修改methods中的handleSubmit方法
handleSubmit() {let url ;let params;if (this.title 新增书籍) {url this.axios.urls.BOOK_ADD;params {bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}} else {url this.axios.urls.BOOK_EDIT;params {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}}this.axios.post(url, params).then(resp {if (resp.data.success) {this.$message({message: resp.data.msg,type: success});this.clear();let params {bookname: this.bookname}this.query(params);} else {this.$message({message: resp.data.msg,type: error})}}).catch(err {})
},四、删除书籍功能
4.1 往methods的handleDelete方法中添加内容
handleDelete(idx, row) {this.$confirm(您确定删除id为 row.id 的书籍吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {let url this.axios.urls.BOOK_DEL;this.axios.post(url, {id: row.id}).then(resp {if (resp.data.success) {this.$message({message: resp.data.msg,type: success});this.clear();let params {bookname: this.bookname}this.query(params);} else {this.$message({message: resp.data.msg,type: error})}})}).catch(() {this.$message({type: info,message: 已取消删除});});
},五、表单验证
5.1 修改弹出层 !--添加删除的弹出框--
el-dialog :titletitle :visible.syncdialogFormVisibleel-form :modelbook :rulesrules refbookel-form-item label书籍名称 :label-widthformLabelWidth propbooknameel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 :label-widthformLabelWidth proppriceel-input v-model.numberbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类型 :label-widthformLabelWidth propbooktypeel-select v-modelbook.booktype placeholder请选择书籍类型el-option v-forby in booktypes :labelby.name :valueby.name :keyby.id/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickhandleCancel取 消/el-buttonel-button typeprimary clickhandleSubmit确 定/el-button/div
/el-dialog5.2 在data中添加变量值
rules:
{bookname: [{required: true, message: 请输入书本名称, trigger: blur},{min: 1, message: 长度必须在1个字符以上, trigger: blur}],price: [{required: true, message: 请输入书本价格, trigger: blur},{type: number, message: 必须为数字, trigger: blur}],booktype: [{required: true, message: 请选择书籍类型, trigger: blur}]
}
