一、增加
1.对话框
（1）修改src/api/gathering.js，在template中增加对话框组件
<el-dialog title="活动编辑" :visible.sync="dialogFormVisible" ></el-dialog>
属性title为对话框标题， visible为是否显示。
（2）变量dialogFormVisible用于控制对话框的显示。我们在脚本代码中定义
data(){
return{
......
dialogFormVisible: false //对话框是否显示
}
},
（3）template中增加按钮，用于打开对话框
<el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
这样点击添加按钮就会弹出一个“活动编辑”的对话框：
dialog属性详见官方文档：http://element-cn.eleme.io/#/zh-CN/component/dialog
2. 编辑表单
修改src/views/table/gathering.vue，在弹出窗口添加编辑表单
<el-dialog title="活动编辑" :visible.sync="dialogFormVisible" width="30%">
<el-form label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="pojo.name" placeholder="活动名称" ></el-input>
</el-form-item>
<el-form-item label="基本地址">
<el-input v-model="pojo.address" placeholder="基本地址"></el-input>
</el-form-item>
<el-form-item label="开始日期">
<el-date-picker type="date" v-model="pojo.starttime" placeholder="开始日期"></el-date-picker>
</el-form-item>
<el-form-item label="截至日期">
<el-date-picker type="date" v-model="pojo.endtime" placeholder="截至日期"></el-date-picker>
</el-form-item>
<el-form-item label="报名截止">
<el-date-picker type="date" v-model="pojo.enrolltime" placeholder="报名截止"></el-date-picker>
</el-form-item>
<el-form-item label="活动详情">
<el-input v-model="pojo.detail" placeholder="活动详情" type="textarea" :rows="2"></el-input>
</el-form-item>
<el-form-item label="是否可见">
<el-switch active-value="1" inactive-value="0" v-model="pojo.status"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" >保存</el-button>
<el-button @click="dialogFormVisible = false" >关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
脚本中添加编辑表单绑定的实体对象
data(){
return{
......
pojo:{} //编辑表单绑定的实体对象
}
},
3.下拉选择框
我们这里需要使用elementUI提供的下拉选择框
（1）准备工作：修改easyMock 中的/base/city (GET)
{
"flag": true,
"code": 20000,
'message': "查询成功",
'data|10': [{
"id|+1": 1,
"name": "@city",
"ishot": "1",
}]
}
（2）创建src/api/city.js
import request from '@/utils/request'
export default {
getList(){
return request({
url: '/base/city',
method: 'get'
})
}
}
（3）修改src/views/table/gathering.vue的js脚本部分
为data添加属性
cityList: []
引入城市API
import cityApi from '@/api/city'
修改created，增加对城市方法的调用
created(){
this.fetchDate(); //页面完成时自动加载fetchDate函数
cityApi.getList().then(response =>{
this.cityList = response.data
});
},
（4）修改src/views/table/gathering.vue，增加城市下拉框
<el-form-item label="城市">
<el-select v-model="pojo.city" placeholder="请选择">
<el-option
v-for="item in cityList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
显示效果：
4.表单提交
（1）修改easymock中的/gathering/gathering （增加活动 POST）,删除多余的一个/gathering
{
"flag": true,
"code": 20000,
'message': "执行成功"
}
（2）修改src/api/gathering.js，增加方法导出
save(pojo) {
return request({
url: `/gathering`,
method: 'post',
data: pojo
})
}
（3）修改src/views/table/gathering.vue的js脚本部分 增加方法执行保存
handleSave(){
gatheringApi.save(this.pojo).then(response=>{
alert(response.message)
if(response.flag){//如果成功
this.fetchData()//刷新列表
}
})
this.dialogFormVisible=false//关闭窗口
}
（4）修改弹出框中的“保存”按钮，调用保存方法
<el-button type="primary" @click="handleSave()">保存</el-button>
二、修改
- 根据ID查找数据
修改需要先查询到需要修改的数据信息,所以要先完成根据ID查询的接口
（1） 修改easymock 接口 /gathering/{id} （GET）
{
"flag": true,
"code": 20000,
'message': "查询成功",
'data': {
"id": "1",
"name": "测试活动",
"sponsor": "主办方",
"image": "@image",
"starttime": "@date",
"endtime": "@date",
"address": "@county(true)",
"enrolltime": "@date",
"state": "1"
}
}
（2）修改src/api/gathering.js，增加方法定义
findById(id) {
return request({
url: `/gathering/gathering/${id}`,
method: 'get'
})
}
（3）修改src/views/table/gathering.vue的js脚本部分
新增handleEdit方法
handleEdit(id){
this.dialogFormVisible=true//打开窗口
if(id!=''){
//调用查询
gatheringApi.findById(id).then( response=>{
if(response.flag){
this.pojo=response.data
}
})
}else{
this.pojo={}//清空表单
this.id =''//清空ID
}
}
按照视频实际学习时发现，如果不添加this.id=’‘的话，如果一点击修改数据之后，就会查询当前ID并进行记录，当添加时的ID不为空，所以就回触发不了添加的事件，所以我个人在此添加了this.id=’’，这样点击添加时，就会把当前的ID和其他数据全部清空。
修改修改新增按钮，调用handleEdit方法时传递空字符串
<el-button type="primary" @click="handleEdit('')">添加</el-button>
（4）在表格table中增加模板列 ,模板列中防止修改按钮，调用handleEdit方法
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row.id)" type="text" size="small"> 修改</el-button>
</template>
</el-table-column>
fixed="right"的作用是定义此列为右固定列
slot-scope用于指定当前行的上下文。使用scope.row可以获取行对象
2.保存修改
（1）准备工作
修改easymock 接口 /gathering/{id} （PUT）
{
"flag": true,
"code": 20000,
'message': "修改成功"
}
（1）修改src/api/gathering.js，增加方法定义
update(id,pojo) {
return request({
url: `/gathering/${id}`,
method: 'put',
data: pojo
})
}
（2）修改src/views/table/gathering.vue的js脚本部分
增加属性id
data(){
return {
......
id:''//当前编辑的ID
}
}
修改handleEdit,增加
this.id=id
修改方法handleSave
handleSave(){
if(this.id!=''){ //修改
gatheringApi.update(this.id,this.pojo).then(response=>{
alert(response.message)
if(response.flag){//如果成功
this.fetchData()//刷新列表
}
})
}else{ //添加
gatheringApi.save(this.pojo).then(response=>{
alert(response.message)
if(response.flag){//如果成功
this.fetchDate()//刷新列表
}
})
}
this.dialogFormVisible=false//关闭窗口
}
以上代码我们可以做一下优化：
修改src/api/gathering.js
update(id,pojo){
if(id == null || id == ''|| pojo== null){
return request({ //保存
url: `/gathering`,
method: 'post',
data: pojo
})
}
return request({ //修改
url: `/gathering/${id}`,
method: 'put',
data: pojo
})
}
保存部分的代码为之前save的代码，本来是直接调用save，但是发现识别不出来，控制台老是显示save未声明，所以在此直接把函数体复制了过来= =
修改src/views/table/gathering.vue的handleSave
handleSave(){
gatheringApi.update(this.id,this.pojo).then(response=>{
this.$message({
message: response.message,
type: (response.flag?'success':'error')
});
if(response.flag){//如果成功
this.fetchDate()//刷新列表
}
})
this.dialogFormVisible=false//关闭窗口
}
三、删除
修改接口：
URL:gathering/:id Method: delete
内容：
{
"flag": true,
"code": 20000,
'message': "执行成功"
}
（1）修改src/api/gathering.js，增加方法定义
deleteById(id){
return request({
url: `/gathering/${id}`,
method: 'delete'
})
}
（2）修改src/views/table/gathering.vue的js脚本部分
增加方法
handleDelete(id){
this.$confirm('确定要删除此纪录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
gatheringApi.deleteById(id).then(response=>{
this.$message({
message: response.message,
type: (response.flag?'success':'error')
})
if(response.flag){
this.fetchData()// 刷新数据
}
})
}).catch(() => {
});
}
（3）修改src/views/table/gathering.vue ，在操作列增加删除按钮
<el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>