Vue3编辑单元格保存

要实现Vue3中编辑单元格并保存的功能，可以采用以下步骤：

1. 在数据源中添加一个布尔类型的属性，用于标识当前单元格是否处于编辑状态，如`isEditing`。

2. 在单元格的模板中，使用`v-if`指令根据`isEditing`的值来选择不同的展示方式。例如，当`isEditing`为`true`时，显示一个输入框或下拉框，允许用户编辑单元格内容；当`isEditing`为`false`时，显示单元格的文本值。

3. 添加一个方法，在用户开始编辑单元格时将`isEditing`属性设置为`true`，并将当前单元格的值保存到一个临时变量中。例如，可以在`input`或`select`的`focus`事件中调用该方法。

4. 添加另一个方法，在用户结束编辑单元格时将`isEditing`属性设置为`false`，并将用户编辑后的值保存到数据源中。例如，可以在`input`或`select`的`blur`事件中调用该方法。

下面是一个简单的示例代码，可以帮助你更好地理解这个过程：

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td @click="startEditing(index)">
          <template v-if="!item.isEditing">
            {{ item.name }}
          </template>
          <template v-else>
            <input type="text" v-model="tempName" @blur="endEditing(index)">
          </template>
        </td>
        <td @click="startEditing(index)">
          <template v-if="!item.isEditing">
            {{ item.price }}
          </template>
          <template v-else>
            <select v-model="tempPrice" @blur="endEditing(index)">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="30">30</option>
            </select>
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "商品1", price: 10, isEditing: false },
        { name: "商品2", price: 20, isEditing: false },
        { name: "商品3", price: 30, isEditing: false },
      ],
      tempName: "",
      tempPrice: "",
    };
  },
  methods: {
    startEditing(index) {
      this.items[index].isEditing = true;
      this.tempName = this.items[index].name;
      this.tempPrice = this.items[index].price;
    },
    endEditing(index) {
      this.items[index].isEditing = false;
      this.items[index].name = this.tempName;
      this.items[index].price = this.tempPrice;
    },
  },
};
</script>

在上面的示例代码中，我们为每个单元格添加了一个`click`事件，当用户点击单元格时，会触发`startEditing`方法。该方法会将当前单元格的`isEditing`属性设置为`true`，并将当前单元格的值保存到临时变量中。

在单元格的模板中，我们使用了`v-if`指令来根据`isEditing`的值来选择不同的展示方式。当`isEditing`为`false`时，显示单元格的文本值；当`isEditing`为`true`时，显示一个输入框或下拉框，允许用户编辑单元格内容。

当用户编辑单元格完成后，会触发`blur`事件，该事件会调用`endEditing`方法。该方法会将当前单元格的`isEditing`属性设置为`false`，并将用户编辑后的值保存到数据源中。