vue+mongodb后端无限级数据获取

代码展示

router.get('/get_super', async (req, res) => {
  let superlist = await superModel.find().lean()
  //这行代码从数据库中获取超级用户的数据，
  //并使用lean()方法将查询结果转换为纯JavaScript对象。
  let superobj = {}
  // 这行代码定义了一个空对象superobj，
  //用于存储每个超级用户的ID作为键，整个用户对象作为值。
  superlist.forEach((item) => {
    superobj[item._id] = item
  })
  //这行代码使用forEach方法遍历superlist数组。对于每个用户对象，
  //都将用户的ID作为键，整个用户对象作为值存储到superobj对象中。
  let list = []//这行代码定义了一个空数组list，用于存储没有子级ID的用户对象
  superlist.forEach((item) => { //再次使用forEach方法遍历superlist数组。//对于每个用户对象，检查其是否有子级ID（sid）。
    if (!item['sid']) {  //如果用户对象没有子级ID，将其添加到list数组中。
      list.push(item)
    }
    //如果用户对象有子级ID，检查superobj[item['sid']]['children']是否存在。
    //如果不存在，则将其初始化为空数组。然后，将当前用户对象添加到父级用户的子级数组中。
    else {
      if (!superobj[item['sid']]['children']) {
        superobj[item['sid']]['children'] = []
      }
      superobj[item['sid']]['children'].push(item)
    }
  })
  res.send({
    code: 200,
    list
  })
})

可使用postman进行数据测试

前端通过/get_super接口获取list数据

配合element-ui中的tree树形控件或Cascader 级联选择器完成渲染

 <el-tree
      :data="list"
      :props="defaultProps"
      @node-click="handleNodeClick"
 ></el-tree>

 defaultProps:{
        children:'children',
        label:'name',
        value:"_id"
 },

绑定对应的数据，完成渲染