vue-bolawen-tree

2024年06月07日

柏拉文

越努力，越幸运

一、认识

---

二、实现

---

2.1 Tree.tsx

import "./tree.scss"
import { defineComponent, ref, toRaw, watch } from "vue";

interface IndentProps {
  level: number;
}

interface TreeNode {
  label: string;
  id: number | string;
  pid: number | string;
  children?: TreeNode[];
}

const Indent = defineComponent({
  name: "Indent",
  props: {
    level: {
      type: Number,
      default: 0,
    },
  },
  setup(props: IndentProps) {
    const list = ref<JSX.Element[]>([]);
    const baseItemClassName = "tree-node-indent-list-item";

    for (let i = 0; i < Number(props.level); i++) {
      list.value.push(<span key={i} class={`${baseItemClassName}`}></span>);
    }

    return () => <div class="tree-node-indent-list">{list.value}</div>;
  },
});

export default defineComponent({
  name: "Tree",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const treeData = ref<any[]>([]);

    watch(
      () => props.data,
      () => {
        treeData.value = toRaw(props.data);
      },
      {
        deep: true,
        immediate: true,
      }
    );

    const renderTree = (nodes: TreeNode[], paraent: { level: number }) => {
      const { level } = paraent;

      return nodes.map((node) => {
        return (
          <div class="tree-node" key={node.id}>
            <Indent level={level} />
            <span class="tree-node-label">{node.label}</span>
            {node.children &&
              renderTree(node.children, {
                level: level + 1,
              })}
          </div>
        );
      });
    };

    return ()=> <div class="tree">{renderTree(treeData.value, { level: 0 })}</div>;
  },
});

2.2 Tree.scss

.tree {
    .tree-node {
      .tree-node-indent-list {
        height: 0;
        display: inline-block;
        .tree-node-indent-list-item {
          width: 16px;
          display: inline-block;
        }
      }
    }
  }

三、测试

---

<template>
  <div>
    <Tree :data="data" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Tree from "./components/Tree1/tree";

const data = ref<any[]>([
  {
    id: 1,
    pid: 0,
    label: "1",
    children: [
      {
        id: 11,
        pid: 1,
        label: "1-1",
        children: [
          {
            id: 111,
            pid: 11,
            label: "1-1-1",
          },
          {
            id: 112,
            pid: 11,
            label: "1-1-2",
          },
        ],
      },
      {
        id: 12,
        pid: 1,
        label: "1-2",
        children: [
          {
            id: 121,
            pid: 12,
            label: "1-2-1",
          },
          {
            id: 122,
            pid: 12,
            label: "1-2-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    pid: 0,
    label: "2",
    children: [
      {
        id: 21,
        pid: 2,
        label: "2-1",
        children: [
          {
            id: 211,
            pid: 21,
            label: "2-1-1",
          },
          {
            id: 212,
            pid: 21,
            label: "2-1-2",
            children: [
              {
                id: 2121,
                pid: 212,
                label: "2-1-2-1",
              },
              {
                id: 2122,
                pid: 212,
                label: "2-1-2-2",
              },
            ],
          },
        ],
      },
      {
        id: 22,
        pid: 2,
        label: "2-2",
        children: [
          {
            id: 221,
            pid: 22,
            label: "2-2-1",
          },
          {
            id: 222,
            pid: 22,
            label: "2-2-2",
          },
        ],
      },
    ],
  },
]);
</script>