东莞网站推广策划活动,公司经营范围分类目录,免费软件网站建设,网站建设活动计划目录 前言#xff1a;
增删改查
表单验证 前言#xff1a;
继上篇博客来写我们的增删改以及表单验证
增删改查
首先先定义接口 数据样式#xff0c;我们可以去elementUI官网去copy我们喜欢的样式 !-- 编辑窗体 --el-dialog :titletitle :visib…目录 前言
增删改查
表单验证 前言
继上篇博客来写我们的增删改以及表单验证
增删改查
首先先定义接口 数据样式我们可以去elementUI官网去copy我们喜欢的样式 !-- 编辑窗体 --el-dialog :titletitle :visible.syncdialogFormVisible closeclearel-form :modelbook :rulesrules refbookel-form-item label书籍编号 :label-widthformLabelWidth propidel-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 :keykey_t.id/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typedanger clickdosub确 定/el-button/div/el-dialog export 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}],price: [{required: true,message: 请输入书籍名称,trigger: blur}],booktype: [{required: true,message: 请输入书籍名称,trigger: blur}]}}},methods: {del(idx, row) {this.$confirm(此操作将永久删除id为 row.id 的数据, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {let url this.axios.urls.SYSTEM_BookDEL;this.axios.post(url, {id: row.id}).then(d {console.log(d);this.$message({type: success,message: 删除成功!});this.query({});this.tableData d.data.rows;this.total d.data.total;}).catch(e {})}).catch(() {this.$message({type: info,message: 已取消删除});});},dosub() {this.$refs[book].validate((valid) {if (valid) {alert(submit!);let url this.axios.urls.SYSTEM_BookADD;if (this.title 编辑窗体) {url this.axios.urls.SYSTEM_BookUPD;}let params {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}this.axios.post(url, params).then(d {console.log(d);this.clear();this.query({});this.tableData d.data.rows;this.total d.data.total;}).catch(e {})} else {console.log(error submit!!);return false;}});},clear() {//初始化窗体this.dialogFormVisible false;this.title 新增窗体;this.book {id: ,bookname: ,price: ,booktype: }},open(idx, row) {//打开窗体的方法this.dialogFormVisible true;if (row) {this.title 编辑窗体;this.book.id row.id;this.book.bookname row.bookname;this.book.price row.price;this.book.booktype row.booktype;}},handleSizeChange(r) {//当页大小发生变化let params {bookname: this.bookname,rows: r,page: this.page}// console.log(params)this.query(params);},handleCurrentChange(p) {//当前页码大小发生变化let params {bookname: this.bookname,rows: this.rows,page: p}// console.log(params)this.query(params);},query(params) {//获取后台请求书籍数据的地址let url this.axios.urls.SYSTEM_BookList;this.axios.get(url, {params: params}).then(d {console.log(url)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 }},created() {this.query({});this.types [{id: 1,name: 玄幻}, {id: 2,name: 动作}, {id: 3,name: 爱情}, {id: 4,name: 伦理}, {id: 5,name: 搞笑}];}} 上效果图 表单验证
表单验证我们也可以去elementUI官网去copy一份 指定验证需要添加该有的属性 写我们的正则方法 rules: {bookname: [{required: true,message: 请输入书籍名称,trigger: blur}],price: [{required: true,message: 请输入书籍价格,trigger: blur}],booktype: [{required: true,message: 请输入书籍类型,trigger: blur}]} 最后就是我们的验证正则 dosub() {this.$refs[book].validate((valid) {if (valid) {let url this.axios.urls.SYSTEM_BookADD;if (this.title 编辑窗体) {url this.axios.urls.SYSTEM_BookUPD;}let params {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}this.axios.post(url, params).then(d {console.log(d);this.clear();this.query({});this.tableData d.data.rows;this.total d.data.total;}).catch(e {})} else {console.log(error submit!!);return false;}});},
效果图
