vue后端返回parentId，前端处理成children嵌套数据

原创

已于 2023-03-08 15:52:02 修改 · 736 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #elementui #逻辑回归

于 2023-03-08 15:45:48 首次发布

本文介绍如何使用Vue.js处理后端返回的parentId数据，将其转换为前端可展示的子级菜单结构。通过筛选一级菜单、添加children属性以及递归处理pid，构建出层次清晰的菜单树，并删除无子项的菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps">
    </el-tree>
  </div>
</template>

  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  }

  methods:{
    getDatas(){
      let data = [
        {"id": 30035, "name": "分类1"},
        {"id": 30036, "name": "分类2"},
        {"id": 30037, "name": "分类3"},
        {"id": 30040, "name": "分类1-1", "parentId": 30035},
        {"id": 30041, "name": "分类2-1", "parentId": 30036},
        {"id": 30042, "name": "分类1-1-1", "parentId": 30040},
        {"id": 30043, "name": "分类1-1-2", "parentId": 30040},
        {"id": 30044, "name": "分类1-1-2-1", "parentI