石家庄企业网站制作哪家好,网站漂浮特效,移动互联网开发培训,国内最新新闻热点事件摘抄#x1f3c5;我是默#xff0c;一个在CSDN分享笔记的博主。#x1f4da;#x1f4da; #x1f31f;在这里#xff0c;我要推荐给大家我的专栏《Vue》。#x1f3af;#x1f3af; #x1f680;无论你是编程小白#xff0c;还是有一定基础的程序员#xff0c;这个专栏… 我是默一个在CSDN分享笔记的博主。 在这里我要推荐给大家我的专栏《Vue》。 无论你是编程小白还是有一定基础的程序员这个专栏都能满足你的需求。我会用最简单易懂的语言带你走进Vue的世界让你从零开始一步步成为JAVA大师。 让我们在Vue的世界里畅游吧 如果感觉还不错的话请记得给我点赞哦 期待你的加入一起学习一起进步 一.实现CRUD
配置路由接口用于向后端请求数据 BOOK_Add: /book/addBook, //绑定书籍BOOK_UPD: /book/editBook, //绑定书籍BOOK_DEL: /book/delBook, //绑定书籍
前端编写以及弹出层
templatediv idbook stylepadding: 30px;!-- 搜索框--el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名字el-input v-modelbookname placeholder书籍名字/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-buttonel-button typeprimary clickopen新增/el-button/el-form-item/el-form!-- 数据表格--el-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-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-table!-- 分页--div classblockel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div!-- 弹出 增加删除--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 propbookytpeel-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 typeprimary clickdosub确定/el-button/div/el-dialog/div
/template
注意 注1隐藏显示设置通过Vue实例对象中的dialogFormVisibletrue|false来控制dialog显示隐藏 :visible.syncdialogFormVisible 注2通过close或closed事件在关闭dialog弹出框时清空form表单数据和验证信息 closedialogClose 增加删除修改功能以及表单验证的实现
scriptexport default {data() {return {bookname: ,tableData: [],rows: 10,page: 1,total: 0,title: 新增,dialogFormVisible: false,formLabelWidth: 100px,types: [],book: {id: ,bookname: ,price: ,booktype: },rules: {bookname: [{required: true,message: 请输入书籍名称,trigger: blur},{min: 1,max: 5,message: 长度在 1到 5 个字符,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.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: 已取消删除});});},dosub() {this.$refs[book].validate((valid) {if (valid) {let url this.axios.urls.BOOK_ADD;//获得动态数据if (this.title 编辑) {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, this.book).then(r {console.log(r);this.clear();this.query({});}).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;}},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: 校园}];}}
/script
增加效果展示 删除效果展示 修改效果展示 表单验证效果展示
