<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
<el-form :model="formData" @change="handleFormChange">
<el-form-item label="Name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="Age">
<el-input v-model="formData.age"></el-input>
</el-form-item>
</el-form>
data() {
return {
tableData: [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 }
],
formData: {
name: '',
age: ''
}
};
},
methods: {
handleFormChange() {
const index = this.tableData.findIndex(item => item.name === this.formData.name);
if (index !== -1) {
this.$set(this.tableData, index, { name: this.formData.name, age: this.formData.age });
}
}
}