在 Vue3 中使用 Element-Plus 实现表单编辑时，将原始数据绑定到表单字段的关键在于使用响应式对象或 `ref` 来管理表单状态，并通过 `v-model` 或手动赋值的方式将数据传递给表单项。 ### 使用 `v-model` 绑定表单数据 可以通过定义一个响应式对象（如 `ref`）来存储表单的初始值，并将其绑定到 `el-form` 上。当需要修改表单时，直接将原始数据赋值给该响应式对象即可实现数据回填。 ```vue <template> <el-form v-model="form" label-width="120px"> <el-form-item label="姓名"> <el-input v-model="form.name" /> </el-form-item> <el-form-item label="年龄"> <el-input-number v-model="form.age" /> </el-form-item> <el-form-item label="出生日期"> <el-date-picker v-model="form.birthdate" type="date" placeholder="选择日期" /> </el-form-item> <el-form-item> <el-button @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script setup lang="ts"> import { ref } from 'vue' // 定义表单数据 const form = ref({ name: '', age: 0, birthdate: null as Date | null }) // 模拟从接口获取原始数据 const fetchData = async () => { const response = await new Promise((resolve) => { setTimeout(() => resolve({ name: '张三', age: 25, birthdate: new Date('1998-01-01') }), 500) }) form.value = response as any } fetchData() </script> ``` 上述代码中，`form` 是一个响应式对象，用于保存表单的当前状态。在调用 `fetchData` 方法后，会模拟从接口获取原始数据并赋值给 `form`，从而自动更新表单字段内容[^1]。 ### 手动赋值方式绑定数据 对于更复杂的场景，例如表单与弹窗结合使用的情况，可以采用手动赋值的方式将原始数据绑定到表单字段。这种方式通常用于新增和编辑共用一个表单组件的场景。 ```vue <template> <el-dialog v-model="visible" :title="title"> <el-form v-model="formData" label-width="120px"> <el-form-item label="姓名"> <el-input v-model="formData.name" /> </el-form-item> <el-form-item label="年龄"> <el-input-number v-model="formData.age" /> </el-form-item> <el-form-item label="出生日期"> <el-date-picker v-model="formData.birthdate" type="date" placeholder="选择日期" /> </el-form-item> <el-form-item> <el-button @click="submitForm">提交</el-button> </el-form-item> </el-form> </el-dialog> <!-- 表格操作列 --> <el-table :data="tableData"> <el-table-column prop="name" label="姓名" /> <el-table-column prop="age" label="年龄" /> <el-table-column prop="birthdate" label="出生日期" /> <el-table-column label="操作" width="270"> <template #default="scope"> <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button> </template> </el-table-column> </el-table> </template> <script setup lang="ts"> import { ref } from 'vue' // 弹窗显示状态 const visible = ref(false) // 弹窗标题 const title = ref('') // 表单数据 const formData = ref({ name: '', age: 0, birthdate: null as Date | null }) // 表格数据 const tableData = ref([ { name: '李四', age: 30, birthdate: new Date('1993-05-20') }, { name: '王五', age: 28, birthdate: new Date('1995-08-15') } ]) // 编辑按钮点击事件 const handleEdit = (row: any) => { visible.value = true title.value = '编辑' formData.value = { ...row } // 深拷贝原始数据 } </script> ``` 在此示例中，`handleEdit` 函数负责处理表格中的“编辑”按钮点击事件。它接收一行数据 `row` 并将其赋值给 `formData`，从而实现表单字段的数据绑定[^2]。 ###