vue使用js将json数据转为树形数据,提供给elementui级联组件

  最近遇到一个需求将另一系统的部门数据通过接口获取到本地，并形成树形数据提供给elementui级联组件作为表单中的组件选择用户的部门id。

 

组件代码

<el-form-item label="员工部门" prop="dept">

<el-cascader v-model="form.dept" :options="options" style="width: 100%" @change="getDeptValue" >

</el-cascader>

</el-form-item>

method

getDept(){
  //可以生成多级嵌套的树
  let treeList=[];
  const map = []
  treeList.forEach(item => {
    item.value=item.id;//为了配合组件使用将id改为value
    item.label=item.name;//为了配合组件使用将name改为label
    map[item.id] = item
  })
  treeList.forEach(item => {
    const parent = map[item.parentId]
    if (parent) {
      if (parent.children) {
        parent.children.push(item)
      } else {
        parent.children = [item]
      }
    }
  })
 //根节点数据的parentId一般为空或者0
  this.options=treeList.filter(item => item.parentId === '0' || !item.parentId)
},