Vue3 中循环数据并弹窗修改的实现方案

在 Vue3 中实现循环数据并通过弹窗修改的功能，可以通过以下方式实现：
方案一：基础实现（使用 Element Plus 的 Dialog）

<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.age }}
        <el-button @click="openEditDialog(item, index)">编辑</el-button>
      </li>
    </ul>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑数据">
      <el-form :model="currentItem">
        <el-form-item label="姓名">
          <el-input v-model="currentItem.name" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model.number="currentItem.age" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

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

const items = ref([
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
  { name: '王五', age: 28 }
])

const dialogVisible = ref(false)
const currentItem = ref({})
const currentIndex = ref(-1)

const openEditDialog = (item, index) => {
  currentItem.value = { ...item } // 创建副本避免直接修改原数据
  currentIndex.value = index
  dialogVisible.value = true
}

const saveEdit = () => {
  items.value[currentIndex.value] = { ...currentItem.value }
  dialogVisible.value = false
}
</script>