Vue.js的最小嵌套树视图组件– Teatree

Vue.js的最小嵌套树视图组件– Teatree
插件名称 vue-teatree
发布时间 2020年7月25日
插件作者 sarimabbas

一个轻量级的,无依赖项的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: [],
          },
        ],
      },
    ],
  },
];