前端代码:
<tr v-for="(item,val,idx) in itm.reserved_list" v-bind:key="idx">
<td>{{ item.ip }}</td>
<td>{{ item.hostname }}</td>
<td>{{ item.mac }}</td>
<td>{{ item.last_discovery_time }}</td>
#通过添加contenteditable="true"属性将该表格变为可编辑,当失去聚焦时触发edit函数,get_remark($event)是获取当前修改的值
<td contenteditable="true" @blur="edit(item.ip,get_remark($event))" v-text="item.remark">
{{item.remark}}
</td>
</tr>
methods方法:
methods: {
#获取可编辑表格编辑后的值
get_remark($event){
this.remark = $event.target.innerText;
return this.remark
},
#将ip,remark传给后端
edit(ip,remark){
console.log(ip,remark)
axios
.post("http://127.0.0.1:5000/display/edit", {
ip: ip,
remark: remark
})
.then((response) => {
console.log(response.data)
this.ip_dict = response.data.ip_dict;
this.update_time = response.data.update_time
})
.catch(function (error) {
console.log(error)
});
},
}