vue watch 表格编辑字段

在 Vue 中，可以使用 `watch` 来监听数据的变化。如果你想要在表格中编辑字段，并且实时将编辑后的数据反映到组件中，可以使用以下步骤：

1. 在组件的 `data` 中定义一个数组，用于存储表格数据。
2. 在模板中使用 `v-for` 渲染表格，同时将每个单元格绑定到数组中对应的数据项。
3. 在每个单元格上添加一个 `@blur` 事件监听器，用于在编辑完成后触发保存操作。
4. 在 `methods` 中定义一个 `saveData` 方法，用于将编辑后的数据保存到数组中。
5. 在 `watch` 中监听数组的变化，并在数据变化时触发相应的操作。

以下是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>
            <input type="text" v-model="item.name" @blur="saveData" />
          </td>
          <td>
            <input type="text" v-model="item.age" @blur="saveData" />
          </td>
          <td>
            <select v-model="item.gender" @blur="saveData">
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          gender: 'male'
        },
        {
          name: '李四',
          age: 20,
          gender: 'female'
        }
      ]
    }
  },
  methods: {
    saveData() {
      // 保存数据
    }
  },
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        // 监听数据变化
      },
      deep: true
    }
  }
}
</script>

在上面的示例中，我们定义了一个 `tableData` 数组来存储表格数据，然后在模板中使用 `v-for` 渲染表格。每个单元格都绑定到数组中对应的数据项，同时添加了一个 `@blur` 事件监听器。当用户编辑完单元格后，会触发 `saveData` 方法将编辑后的数据保存到数组中。在 `watch` 中监听 `tableData` 数组的变化，并在数据变化时触发相应的操作。