Vue2弹窗表格数据回显及修改保存 - 无需子组件

在Vue2中，可以通过使用v-model双向绑定数据来实现数据回显。在弹窗中，可以使用表单元素来展示数据，如input、select等。具体实现步骤如下：

1. 在弹窗组件中，定义一个对象来存储要展示的数据，如：

data() {
  return {
    formData: {
      name: '',
      age: '',
      gender: ''
    }
  }
}

2. 在弹窗中，将表单元素的value值绑定到formData中对应的属性上，如：

<input type='text' v-model='formData.name'>
<select v-model='formData.gender'>
  <option value='male'>男</option>
  <option value='female'>女</option>
</select>

3. 在打开弹窗时，通过接口获取要展示的数据，并将数据赋值给formData，如：

openDialog(userId) {
  // 根据userId从接口获取用户数据
  getUserData(userId).then(res => {
    // 将数据赋值给formData
    this.formData = res.data
  })
  // 打开弹窗
  this.dialogVisible = true
}

4. 当用户点击弹窗的确定按钮时，将formData中的数据提交到接口进行保存，如：

saveData() {
  // 将formData中的数据提交到接口进行保存
  saveUserData(this.formData).then(res => {
    // 保存成功后关闭弹窗
    this.dialogVisible = false
    // 刷新用户列表
    this.getUserList()
  })
}

通过以上步骤，即可实现在弹窗中展示接口返回的数据，并且可以通过表单元素修改数据并保存到接口中。