vue表格数据修改，el-table双向绑定数据

在Vue.js中，特别是使用Element UI库的`el-table`组件，双向数据绑定是一种常用的交互方式，允许用户直接在表格中编辑数据而无需手动操作。为了实现在表格中修改数据，你需要按照以下步骤操作：

1. 首先，在你的Vue组件的数据里定义一个数组，这个数组将会作为表格的数据源。例如：

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 20 },
      { id: 2, name: '李四', age: 25 }
    ]
  };
},

2. 使用`v-model`指令将数组的某个元素绑定到表单字段，如`el-form-item`中的输入框：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" editor="text" />
  <!-- ... 其他列 -->
</el-table>

这里`editor="text"`表示当点击单元格时，会显示一个文本输入框供用户编辑名字。

3. 当用户修改了输入框的内容并提交时，可以监听`el-form`的`input`事件或者使用`element-ui`提供的`@edit`事件，然后更新数据源的对应项。例如：

<template>
  <el-form ref="form" @input="handleEditInput">
    <!-- ... 表单内容 -->
  </el-form>
</template>

<script>
methods: {
  handleEditInput(e) {
    const index = this.$refs.form.getCurrentIndex(); // 获取当前被编辑行的索引
    if (index !== undefined) {
      const newData = { ...this.tableData[index], name: e.detail.value }; // 更新名字字段
      this.tableData.splice(index, 1, newData); // 替换原数据
    }
  }
}
</script>