Vue 修改编辑表格中的某个单元格的值

在Vue中，您可以使用v-model来实现修改表格中某个单元格的值。以下是一个简单的例子：

<template>
  <div>
    <table>
      <tr v-for="(item, index) in items" :key="index">
        <td v-for="(value, key) in item" :key="key">
          <input v-model="item[key]" />
        </td>
      </tr>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', value: 10 },
        { name: 'Item 2', value: 20 },
        { name: 'Item 3', value: 30 },
      ],
    };
  },
};
</script>

在这个例子中，items数组中的每个对象都会被渲染到一个表格的行中。通过使用v-for指令，我们遍历items数组并为每个对象的每个键创建一个<input>元素。通过v-model指令，我们创建了一个双向数据绑定，这意味着每个<input>元素的值都与对应的item对象的属性同步。当您在输入字段中进行更改时，相应的数据属性会自动更新。