Vue.js 3组合式API行内编辑问题：点击编辑影响所有行如何解决

问题根源是你用了**单个布尔变量（比如isEditing）**控制所有行的编辑状态，点击编辑时所有行都会触发状态切换。要实现仅单行生效，需要跟踪当前正在编辑的行的id，而不是用全局的布尔值。

核心实现步骤： #

• 用响应式变量存储当前编辑行的id（初始为null，表示无行在编辑）
• 点击"编辑"时，将该变量设为当前行的id
• 点击"保存"/"取消"时，将变量重置为null
• 模板中通过对比当前行id与编辑id，决定显示文本还是编辑控件

完整代码示例： #

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in dataList" :key="item.id">
        <td>{{ item.id }}</td>
        <td>
          <!-- 根据是否为当前编辑行切换显示 -->
          <span v-if="editingId !== item.id">{{ item.name }}</span>
          <input v-else v-model="item.name" type="text" />
        </td>
        <td>
          <button v-if="editingId !== item.id" @click="startEdit(item.id)">编辑</button>
          <div v-else>
            <button @click="saveEdit">保存</button>
            <button @click="cancelEdit">取消</button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue'

// 模拟数据
const dataList = ref([
  { id: 1, name: '项目A' },
  { id: 2, name: '项目B' },
  { id: 3, name: '项目C' }
])

// 当前编辑行的id，初始为null
const editingId = ref(null)
// 保存编辑前的原始值（用于取消时恢复）
const originalName = ref('')

const startEdit = (id) => {
  // 找到当前行，保存原始名称
  const item = dataList.value.find(item => item.id === id)
  originalName.value = item.name
  // 设置当前编辑行id
  editingId.value = id
}

const saveEdit = () => {
  // 这里可以添加保存到后端的逻辑
  editingId.value = null
}

const cancelEdit = () => {
  // 恢复原始名称
  const item = dataList.value.find(item => item.id === editingId.value)
  item.name = originalName.value
  editingId.value = null
}
</script>

关键说明： #

• editingId仅存储当前正在编辑的行ID，确保只有匹配的行进入编辑状态
• 取消编辑时通过originalName恢复原始值，避免未保存的修改残留
• 所有操作都基于行ID精准控制，不会影响其他行

内容的提问来源于stack exchange，提问作者Adriani Umar