el-table回显到el-form，在el-form中修改数据，el-table没变化

最新推荐文章于 2025-02-07 09:56:23 发布

原创最新推荐文章于 2025-02-07 09:56:23 发布 · 454 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

<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() {
    // 在表单数据变化时更新el-table中对应数据
    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 });
    }
  }
}