vue递归生成树状结构

最新推荐文章于 2024-07-25 09:37:37 发布

前端小葛

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量2.2k

点赞数 3

分类专栏：个人学习技术分享文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_61570458/article/details/129044195

版权

个人学习同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

技术分享

26 篇文章 0 订阅

订阅专栏

该文章展示了如何使用Vue.js和lodash库来处理数据，通过递归方法生成树形结构。代码示例中，作者提供了创建树状结构的函数`handleTree`，用于将扁平化的数据转换为嵌套的结构，适用于显示在表格中。点击按钮可以触发`createTree`函数，更新表格数据。

摘要由CSDN通过智能技术生成

生成前

生成后

console.log打印

全部实现代码片段（附备注

<template>
  <div
    class="container"
    style="font-size: 20px; color: red; text-align: center"
  >
    树状结构递归生成
  </div>
  <div style="text-align: center">
    <el-button type="primary" @click="createTree">点击生成树状结构</el-button>
  </div>
  <!-- 结构表格 -->
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    default-expand-all
  >
    <el-table-column prop="id" label="id" width="200" />
    <el-table-column prop="fatherId" label="fatherId" width="100" />
    <el-table-column prop="name" label="备注" />
  </el-table>
</template>

<script setup>
import { create } from "lodash";
import { reactive, ref } from "vue";
const state = reactive({
  newTree: [],
});
//  id  数据id
//  fatherId 子节点所对应的父节点的id，即如果fatherId = 某一项的id。那他就是那一项的子项
//   name  此处用作备注
const tableData = ref([
  {
    id: 1,
    name: "我是父节点1",
    fatherId: 0,
  },
  {
    id: 2,
    name: "我是父节点2",
    fatherId: 0,
  },
  {
    id: 3,
    name: "我是父节点1的子节点1-1",
    fatherId: 1,
  },
  {
    id: 4,
    name: "我是父节点2的子节点2-1",
    fatherId: 2,
  },
  {
    id: 5,
    name: "我是父节点2的子节点2-2",
    fatherId: 2,
  },
  {
    id: 6,
    name: "我是父节点2的子节点2-3",
    fatherId: 2,
  },
  {
    id: 7,
    name: "我是父节点2-3的子节点2-3-1",
    fatherId: 6,
  },
  {
    id: 8,
    name: "我是父节点2-3的子节点2-3-2",
    fatherId: 6,
  },
  {
    id: 9,
    name: "我是父节点2-3-1的子节点2-3-1-1",
    fatherId: 7,
  },
  {
    id: 10,
    name: "我是父节点2-1的子节点2-1-1",
    fatherId: 4,
  },
]);
//生成树状结构
const createTree = () => {
  console.log("我是生成前的结构", tableData.value);
  state.newTree = handleTree(tableData.value, "id", "fatherId");
  console.log("我是生成后的结构", state.newTree);
  setTimeout(() => {
    tableData.value = state.newTree;
  }, 2000);
};
//_________________________________
//  data 数据源
//  id id字段 默认 'id'
//  parentId 父节点字段 默认 'parentId'
//  children 孩子节点字段 默认 'children
//  rootId 根Id 默认 0
const handleTree = (data, id, parentId, children, rootId) => {
  id = id || "id";
  parentId = parentId || "parentId";
  children = children || "children";
  rootId = rootId || 0;
  //对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(data));
  //循环所有项
  const treeData = cloneData.filter((father) => {
    let branchArr = cloneData.filter((child) => {
      //返回每一项的子级数组
      return father[id] === child[parentId];
    });
    branchArr.length > 0 ? (father.children = branchArr) : "";
    //返回第一层
    return father[parentId] === rootId;
  });
  return treeData != "" ? treeData : data;
};
</script>

<style scoped lang="scss"></style>