插件名称 | 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.将数据传递到树形视图。
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: [],
},
],
},
],
},
];