树形列表结构渲染-方法

很多项目中有这么一个场景，普遍存在后台管理项目，点击一个部门-部门下拉出现子部门-子部门也许还会出现子部门。

这个时候，就需要封装一个方法 通过父id来寻找对象的pid（子id）

<!-- 树形组件 -->
        <el-tree
          ref="deptTree"
          :data="depts"
          :props="defaultProps"
          default-expand-all
          node-key="id"
          :expand-on-click-node="false"
          highlight-current
          @node-click="onNodeClick"
        />
      </div>

步骤一（结构）↑：这是一个element-ui的树形组件结构

export function findMyChildren(list = [], id = 0) {
  const arr = []
  list.forEach(item => {
  // 这里的判断就是递归开始的条件
    if (item.pid === id) {
    // 找到匹配的节点
      const children = findChildren(list, item.id)
      // 当前节点的id和当前节点的子节点的pid是相等的
      if (children.length > 0) {
        item.children = children
      }
      arr.push(item)
    }
  })
  return arr
}

步骤二 ↑：这是封装用来寻找子id的方法，

data() {
   return() {
      depts:[] //存放数据的容器 
 }
}
created() {
    this.getDeparments()
  },
  methods: {
    async getDeparments() {
      // 调用接口
      this.depts = await getDepartmentList()
      // console.log(this.depts)
      this.depts = this.findChildren(this.depts)
    },

定义好之后，需要一个空数组来存放你请求下来的数据-再经过这个方法来找到子id--然后再渲染到结构当中去，就可以实现这个效果

getdepartementList()是封装获取列表的方法，findChildren是封装找子id的方法。

methods中定义方法，发起异步请求获取列表数据--在created（组件创建的时候调用方法获取数据）然后再回到第一步，渲染结构。

这样就可以实现一个树形列表的模块。