vue 可编辑表格 点击上方编辑按钮 编辑完表格数据 再点保存按钮把数据发送给后端 数据怎么绑定

在 Vue 中，可以使用双向数据绑定（v-model）来实现表格数据的绑定。在点击编辑按钮时，可以将表格的数据绑定到一个表单中，然后在表单中修改数据。当点击保存按钮时，可以将修改后的数据发送给后端进行保存。

以下是一个示例代码：

<template>
  <div>
    <button @click="edit">编辑</button>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
    <div v-show="showForm">
      <form>
        <label>姓名：</label>
        <input v-model="formData.name">
        <label>年龄：</label>
        <input v-model.number="formData.age">
        <label>性别：</label>
        <select v-model="formData.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
        <button type="button" @click="save">保存</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: "张三", age: 20, gender: "男" },
        { name: "李四", age: 22, gender: "女" },
        { name: "王五", age: 25, gender: "男" }
      ],
      showForm: false,
      formData: {}
    };
  },
  methods: {
    edit() {
      // 点击编辑按钮时，将第一行数据绑定到表单中
      this.formData = { ...this.data[0] };
      this.showForm = true;
    },
    save() {
      // 点击保存按钮时，将修改后的数据发送给后端进行保存
      // 这里只是打印数据，实际应用中需要发送请求给后端
      console.log(this.formData);
      this.showForm = false;
    }
  }
};
</script>

上述代码中，当点击编辑按钮时，将第一行数据绑定到表单中，然后显示表单。在表单中修改数据后，再点击保存按钮，将修改后的数据发送给后端进行保存。在表格中使用 v-for 循环遍历 data 数组，并使用 v-model 将数据绑定到表格中的每一行中。在表单中也使用 v-model 来绑定表单数据。在保存按钮的点击事件中，可以调用后端 API，将修改后的数据发送给后端进行保存。