vue watch 表格编辑字段

在 Vue 中，可以使用 `watch` 监听属性的变化，并在属性发生变化时执行一些操作。如果要实现表格编辑字段的功能，可以先在数据中添加一个属性来表示当前正在编辑的行和列，然后在 `watch` 中监听这个属性的变化，更新对应的单元格数据。

以下是一个简单的示例：

<template>
  <div>
    <table>
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(cell, colIndex) in row" :key="colIndex">
          <span v-if="editRow === rowIndex && editCol === colIndex">
            <input type="text" v-model="cell" @blur="editRow = -1; editCol = -1">
          </span>
          <span v-else @click="editRow = rowIndex; editCol = colIndex">{{ cell }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['Apple', 'Red', 1],
        ['Banana', 'Yellow', 2],
        ['Orange', 'Orange', 3]
      ],
      editRow: -1,
      editCol: -1
    }
  },
  watch: {
    editRow(row) {
      if (row !== -1) {
        this.$nextTick(() => {
          this.$el.querySelector('input').focus()
        })
      }
    }
  }
}
</script>

在这个示例中，`tableData` 是一个二维数组，其中每个元素表示一个单元格的数据。`editRow` 和 `editCol` 分别表示当前正在编辑的行和列，初始值为 `-1` 表示没有正在编辑的单元格。

在模板中，使用 `v-for` 渲染表格，并根据 `editRow` 和 `editCol` 决定是否显示输入框。

在 `watch` 中，监听 `editRow` 的变化，并在输入框显示时让其自动获取焦点。

当输入框失去焦点时，将 `editRow` 和 `editCol` 的值重置为 `-1`，表示结束编辑。