一个轻量级的，无依赖项的Vue.js组件，可从您定义的任何数据结构中呈现嵌套的可折叠树视图。

安装和下载：

# Yarn
$ yarn add vue-teatree

# NPM
$ npm i vue-teatree --save

如何使用它：

1.将Teatree导入到Vue.js项目中。

import { Teatree, NodeType, NodeName, NodeToggle } from "vue-teatree";

2.将Teatree组件添加到模板。

<Teatree :roots="data">
  <template slot="node-toggle" slot-scope="{ node }">
    <NodeToggle :node="node" />
  </template>
  <template slot="node-name" slot-scope="{ node }">
    <NodeName
      :node="node"
      :handleNodeLeftClick="() => {}"
      :handleNodeRightClick="() => {}"
    />
  </template>
</Teatree>

3.将数据传递到树形视图。

• 名称：节点名称
• show：显示或隐藏节点
• showChildren：显示孩子
• selected ：是否选中
• children ：子节点
• icon ：自定义图标

const data: NodeType[] = [
  {
    name: "node-1",
    show: true,
    showChildren: true,
    selected: false,
    children: [
      {
        name: "node-1-1",
        show: true,
        showChildren: true,
        selected: false,
        children: [
          {
            name: "node-1-1-1",
            show: true,
            showChildren: true,
            selected: false,
            children: [],
          },
        ],
      },
    ],
  },
];

---

官网：https://github.com/sarimabbas/vue-teatree

演示：https://www.vue365.cn/code_demo.php?id=1496

GitHub下载：https://github.com/sarimabbas/vue-teatree/archive/master.zip