vue 弹窗数据回显

### 如何在 Vue 中实现弹窗数据回显功能 #### 创建基础结构 为了实现在 Vue 项目中的弹窗组件并支持数据回显，需先创建一个基本的 Vue 组件来表示这个对话框。这里假设使用 Element UI 的 `el-dialog` 和 `el-form` 来构建表单。 ```html <template> <div id="app"> <!-- 表格部分 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column fixed="right" label="操作" width="180"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button> </template> </el-table-column> </el-table> <!-- 对话框部分 --> <el-dialog title="编辑信息" v-model="dialogFormVisible"> <el-form :model="form"> <el-form-item label="姓名" :label-width="'120px'"> <el-input v-model="form.name" autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="saveChanges()">确 定</el-button> </span> </el-dialog> </div> </template> ``` #### 添加脚本逻辑 接下来，在 `<script>` 部分定义相应的 JavaScript 方法用于控制对话框显示隐藏以及处理保存后的行为： ```javascript <script> export default { data() { return { tableData: [ { name: '张三', age: 24 }, { name: '李四', age: 27 } ], dialogFormVisible: false, form: {} }; }, methods: { handleEdit(index, row) { this.form = Object.assign({}, row); // 复制当前行的数据到表单对象中以便修改[^1] this.dialogFormVisible = true; }, saveChanges() { const index = this.tableData.findIndex(item => item === this.form); if (index !== -1) { this.$set(this.tableData, index, this.form); // 更新表格对应位置的数据 } else { console.error('未找到对应的记录'); } this.dialogFormVisible = false; // 清除表单内容防止下次打开残留上次的信息 this.resetFormData(); }, resetFormData(){ this.form = {}; } } }; </script> ``` 通过上述代码片段可以完成如下工作： - 当点击某一行上的“编辑”按钮时会触发 `handleEdit()` 函数，该函数负责将选中行的内容复制给 `this.form` 并展示对话框。 - 用户可以在对话框内更改字段值；当按下确认键调用 `saveChanges()` 后，则会尝试定位原数组里相同项的位置，并替换其旧值为新输入的结果。 - 关闭窗口前清空临时存储的对象以防影响下一次操作。