ElementUI增删改的实现及表单验证

一、准备

在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'}]
}