现在需要实现的功能是:

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'

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐