1.准备
1.1.在api/action.js新增内容
'BOOK_ADD': '/book/addBook', //书籍添加 'BOOK_EDIT': '/book/editBook', //书籍编辑 'BOOK_DEL': '/book/delBook', //书籍删除
1.新增书籍功能
1.1.添加新增按钮
<template> <div style="padding: 20px"> .... //新增语句开始 <el-button type="success" @click="onAdd()">新增</el-button> //新增语句结束 <!-- 数据表格 --> <el-table :data="tableData" style="width: 100%"> ..... </el-table> ... </div> </template>
1.2.新增弹出框
<!--添加删除的弹出框--> <el-dialog title="新增书籍" :visible.sync="dialogFormVisible"> <el-form :model="book"> <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 v-model="book.booktype" placeholder="请选择书籍类型"> <el-option v-for="by in booktypes" :label="by.name" :value="by.name" :key="by.id"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleCancel">取 消</el-button> <el-button type="primary" @click="handleSubmit">确 定</el-button> </div> </el-dialog>
1.3.data中添加内容
book: { id: '', bookname: '', price: '', booktype: '' }, dialogFormVisible: false, formLabelWidth: '100px', booktypes: [{id: 1, name: '玄幻'}, {id: 2, name: '名著'}, {id: 3, name: '计算机'}], title: '新增书籍'
1.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(); },
效果展示
2.编辑书籍功能
2.1.表格中添加编辑和删除按钮
<el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column>
2.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 = '编辑书籍'; },
2.3.修改methods中clear方法
clear() { this.dialogFormVisible = false; this.book.booktype = ''; this.book.bookname = ''; this.book.price = ''; this.title = ''; },
2.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 => { }) },
效果展示
3.删除书籍功能
3.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: '已取消删除' }); }); },
效果
4.表单验证
4.1.修改弹出层
<!--添加删除的弹出框--> <el-dialog :title="title" :visible.sync="dialogFormVisible"> <el-form :model="book" :rules="rules" ref="book"> <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname"> <el-input v-model="book.bookname" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price"> <el-input v-model.number="book.price" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype"> <el-select v-model="book.booktype" placeholder="请选择书籍类型"> <el-option v-for="by in booktypes" :label="by.name" :value="by.name" :key="by.id"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleCancel">取 消</el-button> <el-button type="primary" @click="handleSubmit">确 定</el-button> </div> </el-dialog>
4.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'} ] }
效果
