一、准备
在action.js中添加对后台请求的地址
'BOOK_ADD': '/book/addBook', //书籍添加 'BOOK_EDIT': '/book/editBook', //书籍编辑 'BOOK_DEL': '/book/delBook', //书籍删除
二、添加功能
2.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>
2.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>
2.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-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>
3.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 :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>
5.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'} ] }
