vue表单数据回显

Nikki_u

已于 2022-04-28 23:41:31 修改

阅读量8.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vue.js

于 2022-04-23 12:21:25 首次发布

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/124362067

本文讲解如何在Vue应用中，通过子组件的点击事件触发父组件的编辑功能，以及如何在弹出层中根据点击的ID显示对应数据，涉及父子组件通信、数据传递和编辑界面展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在需要实现的功能是：

1、子组件点击编辑按钮

2、传入父组件实现编辑功能

3、在弹出层中根据点击的id回显对应的数据

编辑回显

treeTools.vue

当点击编辑按钮，触发父的编辑事件，传入数据

this.$emit('editDpts', this.treeData)

index.vue

<TreeTool
  :tree-data="data"
  @addChangeDepart="addChangeDepart"
  @getDpts="getDpts"
  @editDpts="editDpts"+++++++++接收方法
/>

<DialogDeprts
  ref="DialogDeprts"++++++++绑定ref
  :tree-node="node"
  :dialog-visible.sync="showDialog"
  @addDpts="getDpts"
/>

写方法

async editDpts(node) {
  console.log(node)
  this.showDialog = true
  this.node = node
  this.$refs.DialogDeprts.getDepartDe(node.id)
  //通过ref获取DialogDeprts组件中的的方法
}

DialogDeprts.vue

async getDepartDe(id) {
  this.formData = await getDepartDetail(id)
}

import {
  getDepartment,
  addDepartment,
  getDepartDetail
} from '@/api/departments'