vue表单数据回显

现在需要实现的功能是：

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'