诸暨市住房和建设局网站,怎么做wp网站,用手机制作网站,做关键字要改网站SPA项目之主页面--数据表格的增删改查 一.增删改查1.样式准备2.增加3.删除4.修改5.查询二.表单验证1.在表单中使用验证规则 一.增删改查
1.样式准备
templatediv classbooks stylepadding: 20px;el-form :inlinetruetemplatediv classbooks stylepadding: 20px;el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-item/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-buttonel-button typeprimary clickopen增加/el-button/el-form-item/el-formel-table :datatableData stripe stylewidth: 100%el-table-column propid label书籍编号 width180/el-table-columnel-table-column propbookname label书籍名称 width180/el-table-columnel-table-column propprice label价格/el-table-columnel-table-column propbooktype label书籍类别/el-table-column/el-table-columnel-table-column label操作template slot-scopescopeel-button sizemini clickopen(scope.$index, scope.row)编辑/el-buttonel-button sizemini typedanger clickdel(scope.$index, scope.row)删除/el-button/template/el-table-column/el-tablespan classdemonstration完整功能/spanel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-paginationel-dialog :titletitle :visible.syncdialogFormVisible closeclearel-form :modelbook :rulesrules refbookel-form-item label书籍编号 :label-widthformLabelWidthel-input v-modelbook.id autocompleteoff/el-input/el-form-itemel-form-item label书籍名称 :label-widthformLabelWidth propbooknameel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 :label-widthformLabelWidth proppriceel-input v-modelbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类型 :label-widthformLabelWidth propbooktypeel-select v-modelbook.booktype placeholder请选择书籍类型el-option v-fort in types :labelt.name :valuet.name keykeyt.id/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdosuib确 定/el-button/div/el-dialog/div/template2.增加
为了代码的简洁性封装了一个clear的方法
clear() {this.dialogFormVisible false;this.book {id: ,bookname: ,price: ,booktype: }后面会使用到
dosuib() {this.$refs[book].validate((valid) {if (valid) {let url this.axios.urls.BOOK_ADD;if (this.title 编辑窗体) {let url this.axios.urls.BOOK_UPD;}let params {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype};this.axios.post(url, params).then(r {console.log(r)this.clear();this.query({});}).catch(e {})} else {console.log(error submit!!);return false;}});},clear() {this.dialogFormVisible false;this.book {id: ,bookname: ,price: ,booktype: }this.title 新增窗体;}, 3.删除
del(idx, row) {this.$confirm(此操作将删除该记录, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {let url this.axios.urls.BOOK_DEL;this.axios.post(url, {id:row.id}).then(r {console.log(r);this.$message({type: success,message: 删除成功!});this.query({});}).catch(e {})}).catch(() {this.$message({type: info,message: 已取消删除});});},4.修改
open(idx, row) {this.dialogFormVisible true;if (row) {this.title 编辑窗体;this.book.bookname row.bookname;this.book.price row.price;this.book.booktype row.booktype;this.book.id row.id;}},5.查询
query(params) {let url this.axios.urls.BOOK_LIST;this.axios.get(url, {params: params}).then(r {console.log(r)this.tableData r.data.rows;this.total r.data.total;}).catch(e {})},
onSubmit() {let params {bookname: this.bookname}this.query(params);},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);}},#所有代码
templatediv classbooks stylepadding: 20px;el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-item/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-buttonel-button typeprimary clickopen增加/el-button/el-form-item/el-formel-table :datatableData stripe stylewidth: 100%el-table-column propid label书籍编号 width180/el-table-columnel-table-column propbookname label书籍名称 width180/el-table-columnel-table-column propprice label价格/el-table-columnel-table-column propbooktype label书籍类别/el-table-column/el-table-columnel-table-column label操作template slot-scopescopeel-button sizemini clickopen(scope.$index, scope.row)编辑/el-buttonel-button sizemini typedanger clickdel(scope.$index, scope.row)删除/el-button/template/el-table-column/el-tablespan classdemonstration完整功能/spanel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-paginationel-dialog :titletitle :visible.syncdialogFormVisible closeclearel-form :modelbook :rulesrules refbookel-form-item label书籍编号 :label-widthformLabelWidthel-input v-modelbook.id autocompleteoff/el-input/el-form-itemel-form-item label书籍名称 :label-widthformLabelWidth propbooknameel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 :label-widthformLabelWidth proppriceel-input v-modelbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类型 :label-widthformLabelWidth propbooktypeel-select v-modelbook.booktype placeholder请选择书籍类型el-option v-fort in types :labelt.name :valuet.name keykeyt.id/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdosuib确 定/el-button/div/el-dialog/div/templatescriptexport default {data() {return {bookname: ,tableData: [],rows: 10,total: 0,page: 1,title: 新增,dialogFormVisible: false,formLabelWidth: 100px,types: [],book: {id: ,bookname: ,price: ,booktype: },rules: {bookname: [{required: true,message: 请输入书籍名称,trigger: blur},{min: 4,max: 11,message: 长度在 3 到 5 个字符,trigger: blur}],price: [{required: true,message: 请输入书籍名称,trigger: blur}],booktype: [{required: true,message: 请输入书籍名称,trigger: blur}]}}},methods: {del(idx, row) {this.$confirm(此操作将删除该记录, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {let url this.axios.urls.BOOK_DEL;this.axios.post(url, {id:row.id}).then(r {console.log(r);this.$message({type: success,message: 删除成功!});this.query({});}).catch(e {})}).catch(() {this.$message({type: info,message: 已取消删除});});},dosuib() {this.$refs[book].validate((valid) {if (valid) {let url this.axios.urls.BOOK_ADD;if (this.title 编辑窗体) {let url this.axios.urls.BOOK_UPD;}let params {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype};this.axios.post(url, params).then(r {console.log(r)this.clear();this.query({});}).catch(e {})} else {console.log(error submit!!);return false;}});},clear() {this.dialogFormVisible false;this.book {id: ,bookname: ,price: ,booktype: }this.title 新增窗体;},open(idx, row) {this.dialogFormVisible true;if (row) {this.title 编辑窗体;this.book.bookname row.bookname;this.book.price row.price;this.book.booktype row.booktype;this.book.id row.id;}},query(params) {let url this.axios.urls.BOOK_LIST;this.axios.get(url, {params: params}).then(r {console.log(r)this.tableData r.data.rows;this.total r.data.total;}).catch(e {})},onSubmit() {let params {bookname: this.bookname}this.query(params);},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);}},created() {this.query({});this.types [{id: 1,name: 爽文,},{id: 2,name: 伦理,},{id: 3,name: 仙侠,},{id: 4,name: 玄幻,},]}}
/scriptstyle
/style
-
url
/*** 对后台请求的地址的封装URL格式如下* 模块名_实体名_操作*/
export default {SERVER: http://localhost:8080/, //服务器SYSTEM_USER_DOLOGIN: /user/userLogin, //登陆SYSTEM_USER_DOREG: /user/userRegister, //注册SYSTEM_USER_MENUS: /module/queryRootNode, //左侧BOOK_LIST: /book/queryBookPager, //书籍列表BOOK_ADD: /book/addBook, //书籍增加BOOK_UPD: /book/editBook, //书籍修改BOOK_DEL: /book/delBook, //书籍删除getFullPath: k { //获得请求的完整地址用于mockjs测试时使用return this.SERVER this[k];}
}
二.表单验证
1.在表单中使用验证规则
el-dialog :titletitle :visible.syncdialogFormVisible closeclearel-form :modelbook :rulesrules refbookel-form-item label书籍编号 :label-widthformLabelWidthel-input v-modelbook.id autocompleteoff/el-input/el-form-itemel-form-item label书籍名称 :label-widthformLabelWidth propbooknameel-input v-modelbook.bookname autocompleteoff/el-input/el-form-itemel-form-item label书籍价格 :label-widthformLabelWidth proppriceel-input v-modelbook.price autocompleteoff/el-input/el-form-itemel-form-item label书籍类型 :label-widthformLabelWidth propbooktypeel-select v-modelbook.booktype placeholder请选择书籍类型el-option v-fort in types :labelt.name :valuet.name keykeyt.id/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdosuib确 定/el-button/div/el-dialog2.定义规则
rules: {bookname: [{required: true,message: 请输入书籍名称,trigger: blur},{min: 4,max: 11,message: 长度在 3 到 5 个字符,trigger: blur}],price: [{required: true,message: 请输入书籍名称,trigger: blur}],booktype: [{required: true,message: 请输入书籍名称,trigger: blur}]}}},
