最近在加班加点，生活变成了997，再赶一个项目才发现自己的，前端技术是那么的差，很希望有时间来捋一下，实在没时间，那就去偷时间吧。 主要想弄清楚的是在vue项目上的增加删除和修改等功能。
一、向数据库增加一条记录
每条记录v-model双向绑定接口对应的字段，用来传数据。 另外还要在data：{} 里面定义需要实时显示的数据。 最后用post请求，我这里是封装了post的方法。 例如：
<el-dialog>
<div class="dialog-content">
<table class="form-table">
<tr>
<td width="20%"><span class="red">*</span>摄像头id</td>
<td><el-input type="text" v-model="addDevieData.camera_id"></el-input></td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
<button class="btn btn-green" @click="addDevice()">确 定</button>
<button class="btn btn-orange" @click="addDialog = false">关 闭</button>
</span>
</el-dialog>
在data中定义数据：
data () {
return {
addDevieData: {
camera_id:'', // 定义空属性
},
}
}
addDevice() {
const { camera_id } = this.addDevieData; // 定义参数
this.$commonReq
(“url”, {
camera_id
// 需要传递的参数，也可以不是对象。
}, (result_data) => {
console.log(result_data)
this.$message.success('提交成功');
});
},
二、向数据库修改一条记录
修改的时候首先要选择一条数据，根据一个Id来传值，请求修改的数据接口带一个Id参数然后把数据填到表格上，在按确定的时候，就是修改数据啦
modifyItem () {
if (this.multipleSelection.length > 1 || this.multipleSelection.length == 0) {
this.$message("请选择一条记录"); return;
}；
let { camera_id } = this.multipleSelection[0];
this.$commonReq('/fireworks/device/camera/modify', { camera_id }, (result_data) => {
this.addDevieData.resetProperty(result_data);
const { channel_count, channel_num, ...others } = result_data;
});
},
三、向数据库删除一条记录
删除数据也是一样，我这里的删除是需要输入密码的，所以我带一个密码参数，删除数据的时候也需要一个Id，然后请求删除接口。
confirmDelItem (confirm_pwd) {
//处理删除确认
const camera = this.multipleSelection.map(({camera_id}) => camera_id).join(",");
this.$commonReq("url", {
camera_id: camera,
confirm_pwd: confirm_pwd
}, () => {
this.$message.success('删除成功');
this.showDelWarning = false;
this.search();
});
},