<template>
  <div
    class="container"
    style="font-size: 20px; color: red; text-align: center"
  >
    樹狀結(jié)構(gòu)遞歸生成
  </div>
  <div style="text-align: center">
    <el-button type="primary" @click="createTree">點(diǎn)擊生成樹狀結(jié)構(gòu)</el-button>
  </div>
  <!-- 結(jié)構(gòu)表格 -->
  <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  數(shù)據(jù)id
//  fatherId 子節(jié)點(diǎn)所對(duì)應(yīng)的父節(jié)點(diǎn)的id，即如果fatherId = 某一項(xiàng)的id。那他就是那一項(xiàng)的子項(xiàng)
//   name  此處用作備注
const tableData = ref([
  {
    id: 1,
    name: "我是父節(jié)點(diǎn)1",
    fatherId: 0,
  },
  {
    id: 2,
    name: "我是父節(jié)點(diǎn)2",
    fatherId: 0,
  },
  {
    id: 3,
    name: "我是父節(jié)點(diǎn)1的子節(jié)點(diǎn)1-1",
    fatherId: 1,
  },
  {
    id: 4,
    name: "我是父節(jié)點(diǎn)2的子節(jié)點(diǎn)2-1",
    fatherId: 2,
  },
  {
    id: 5,
    name: "我是父節(jié)點(diǎn)2的子節(jié)點(diǎn)2-2",
    fatherId: 2,
  },
  {
    id: 6,
    name: "我是父節(jié)點(diǎn)2的子節(jié)點(diǎn)2-3",
    fatherId: 2,
  },
  {
    id: 7,
    name: "我是父節(jié)點(diǎn)2-3的子節(jié)點(diǎn)2-3-1",
    fatherId: 6,
  },
  {
    id: 8,
    name: "我是父節(jié)點(diǎn)2-3的子節(jié)點(diǎn)2-3-2",
    fatherId: 6,
  },
  {
    id: 9,
    name: "我是父節(jié)點(diǎn)2-3-1的子節(jié)點(diǎn)2-3-1-1",
    fatherId: 7,
  },
  {
    id: 10,
    name: "我是父節(jié)點(diǎn)2-1的子節(jié)點(diǎn)2-1-1",
    fatherId: 4,
  },
]);
//生成樹狀結(jié)構(gòu)
const createTree = () => {
  console.log("我是生成前的結(jié)構(gòu)", tableData.value);
  state.newTree = handleTree(tableData.value, "id", "fatherId");
  console.log("我是生成后的結(jié)構(gòu)", state.newTree);
  setTimeout(() => {
    tableData.value = state.newTree;
  }, 2000);
};
//_________________________________
//  data 數(shù)據(jù)源
//  id id字段 默認(rèn) 'id'
//  parentId 父節(jié)點(diǎn)字段 默認(rèn) 'parentId'
//  children 孩子節(jié)點(diǎn)字段 默認(rèn) 'children
//  rootId 根Id 默認(rèn) 0
const handleTree = (data, id, parentId, children, rootId) => {
  id = id || "id";
  parentId = parentId || "parentId";
  children = children || "children";
  rootId = rootId || 0;
  //對(duì)源數(shù)據(jù)深度克隆
  const cloneData = JSON.parse(JSON.stringify(data));
  //循環(huán)所有項(xiàng)
  const treeData = cloneData.filter((father) => {
    let branchArr = cloneData.filter((child) => {
      //返回每一項(xiàng)的子級(jí)數(shù)組
      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>