一. 书籍的添加
-
在action.js中添加接口地址进行管理
‘BOOK_ADD’: ‘/book/addBook’, //书籍新增
‘BOOK_EDIT’: ‘/book/editBook’, //书籍修改
‘BOOK_DEL’: ‘/book/delBook’, //书籍删除 -
在BookList.vue添加弹窗表单
dialogFormVisible
默认为false
不显示此弹窗
@close
关闭弹窗时调用clear
方法
el-option
标签中必须有唯一标识key
<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear"> <el-form :model="book"> <el-form-item label="编号" :label-width="formLabelWidth"> <el-input v-model="book.id" autocomplete="off"></el-input> </el-form-item> <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="ty in booktype" :label="ty.name" :value="ty.name" :key="'key_'+ty.id"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="clear">取 消</el-button> <el-button type="primary" @click="doSub">确 定</el-button> </div> </el-dialog>
-
添加新增按钮
<el-button type="success" @click="open">添加</el-button>
-
open事件
修改dialogFormVisible
为true打开弹窗open() { this.dialogFormVisible = true; },
-
clear事件
为了在关闭弹窗后,再次打开表单时,让表单的数据为空clear() { title: '新增窗体'; this.dialogFormVisible = false; this.book = { id: '', bookname: '', price: '', booktype: '' }; },
-
doSub事件
提交表单
title参数为了判断要弹出的窗口是新增窗口,还是修改窗口,从而修改url
提交数据时,不要直接将book实体提交,可能会造成数据紊乱,需要在封装在另一个实体中doSub(title) { let url = this.axios.urls.BOOK_ADD; if (title == '修改窗口') { url = this.axios.urls.BOOK_EDIT; } let params = { id: this.book.id, bookname: this.book.bookname, price: this.book.price, booktype: this.book.booktype } this.axios.post(url, params).then(e => { console.log(e); if (e.data.success) { this.query({}); this.$message({ message: e.data.msg, type: 'success' }); } else { this.$message({ message: e.data.msg, type: 'error' }); } }).catch(err => {}) },
-
结果
二. 书籍的修改
在表单的后面添加功能列
scope.$index 行下标 scope.row 行数据
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
修改open方法实现当存在行数据时,修改当前的title为修改窗口,并将数据存入book实体,实现数据绑定到弹窗
open(idx, row) {
if (row) {
this.title = '修改窗口';
this.book = {
id: row.id,
bookname: row.bookname,
price: row.price,
booktype: row.booktype
};
}
this.dialogFormVisible = true;
},
三. 书籍的删除
添加删除方法del
弹出询问框 是否要删除
当确认输出后发送请求提交需要删除的数据的 id
删除后再次查询显示数据
del(idx, row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let url = this.axios.urls.BOOK_DEL;
let params = {
id: row.id
}
this.axios.get(url, {
params: params
}).then(e => {
if (e.data.success) {
this.query();
this.$message({
type: 'success',
message: '删除成功!'
});
} else {
this.$message({
type: 'error',
message: '删除失败!'
});
}
}).catch(err => {})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
四. 数据校验
在表单el-form
头添加属性rules
, 绑定属性 ref
<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
<el-form :model="book" :rules="rules" ref="book">
<el-form-item label="编号" :label-width="formLabelWidth">
<el-input v-model="book.id" autocomplete="off"></el-input>
</el-form-item>
<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="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="ty in booktype" :label="ty.name" :value="ty.name" :key="'key_'+ty.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="clear">取 消</el-button>
<el-button type="primary" @click="doSub">确 定</el-button>
</div>
</el-dialog>
在data
中添加rules
rules: {
bookname: [{
required: true,
message: '请输入书籍名称',
trigger: 'blur'
},
{
min: 2,
max: 8,
message: '长度在 2 到 8 个字符',
trigger: 'blur'
}
],
price: [{
required: true,
message: '请输入价格',
trigger: 'blur'
}],
booktype: [{
type: 'date',
required: true,
message: '请选择书籍类别',
trigger: 'change'
}]
}
refs
绑定表单头的ref
属性
doSub() {
this.$refs['book'].validate((valid) => {
if (valid) {
let url = this.axios.urls.BOOK_ADD;
if (this.title == '修改窗口') {
url = this.axios.urls.BOOK_EDIT;
}
let params = {
id: this.book.id,
bookname: this.book.bookname,
price: this.book.price,
booktype: this.book.booktype
}
this.axios.post(url, params).then(e => {
console.log(e);
if (e.data.success) {
this.query({});
this.$message({
message: e.data.msg,
type: 'success'
});
} else {
this.$message({
message: e.data.msg,
type: 'error'
});
}
}).catch(err => {})
} else {
console.log('error submit!!');
return false;
}
});
},