<script> import Axios from 'axios'; export default { data() { return { form: { stuno: '', stuname: '', stuage: '', }, tableData:[], studentMessage:null, } }, methods: { onSubmit() { this.$message('添加成功!') }, onCancel() { this.$message({ message: '取消!', type: 'warning' }) }, //实现添加 addStudent(){ //后端更新 var url = ` http://localhost:8080/javaWebMaven_war_exploded/addStudent.action?stuno=${this.form.stuno}&stuname=${this.form.stuname}&stuage=${this.form.stuage}`; Axios.get(url).then(response=>{ //前端更新 this.$set(this.tableData, this.studentMessage, this.form); }).catch(error=>{ console.log("添加失败了:"+error) }); } } } </script>补全添加学生
时间: 2024-02-14 14:19:04 浏览: 24
的代码,使得在添加成功后能够清空表单并更新表格数据。
```
<template>
<div>
<el-form :model="form" label-width="80px" style="margin-top: 20px;">
<el-form-item label="学号">
<el-input v-model="form.stuno"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.stuname"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.stuage"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addStudent">添加</el-button>
<el-button @click="onCancel">取消</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="stuno" label="学号"></el-table-column>
<el-table-column prop="stuname" label="姓名"></el-table-column>
<el-table-column prop="stuage" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script>
import Axios from 'axios';
export default {
data() {
return {
form: {
stuno: '',
stuname: '',
stuage: '',
},
tableData: [],
}
},
methods: {
onSubmit() {
this.$message('添加成功!')
},
onCancel() {
this.$message({
message: '取消!',
type: 'warning'
})
},
//实现添加
addStudent() {
//后端更新
var url = `http://localhost:8080/javaWebMaven_war_exploded/addStudent.action?stuno=${this.form.stuno}&stuname=${this.form.stuname}&stuage=${this.form.stuage}`;
Axios.get(url).then(response => {
//前端更新
this.tableData.push({
stuno: this.form.stuno,
stuname: this.form.stuname,
stuage: this.form.stuage,
});
this.form.stuno = '';
this.form.stuname = '';
this.form.stuage = '';
this.$message('添加成功!');
}).catch(error => {
console.log("添加失败了:" + error)
});
}
}
}
</script>
```