Vue3 表格数据绑定到输入框：v-model 指令使用指南

在 Vue3 中，你可以使用 'v-model' 指令将表格中的数据绑定到输入框中。

假设你有一个表格，其中的数据是一个数组 'tableData'，每一行数据有一个 'name' 属性，你想要将选中的行的数据显示在输入框中。你可以使用以下步骤实现：

1. 在 <template> 中，使用 'v-for' 指令循环渲染表格，并为每一行数据绑定一个点击事件。

<table>
  <tr v-for='row in tableData' :key='row.id' @click='selectRow(row)'>
    <td>{{ row.name }}</td>
    <!-- 其他表格列 -->
  </tr>
</table>

2. 在 <script> 中，定义一个 'selectedRow' 变量来保存选中的行数据，默认为空。

data() {
  return {
    tableData: [...], // 表格数据
    selectedRow: null // 选中的行数据
  }
},

3. 在 'selectRow' 方法中，将选中的行数据赋值给 'selectedRow' 变量。

methods: {
  selectRow(row) {
    this.selectedRow = row;
  }
}

4. 在输入框中使用 'v-model' 指令将 'selectedRow' 的 'name' 属性绑定到输入框的值上。

<input type='text' v-model='selectedRow.name'>

这样，当你点击表格中的某一行时，对应行的数据就会显示在输入框中。当你修改输入框的值时， 'selectedRow' 的 'name' 属性也会随之更新。