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"
 },

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

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值