Vue的简单Treeview组件，没有额外的依赖——VueTeatree

Vue Teatree是一个不依赖第三方库的Vue树组件，简单易用！

---

 

---

Github

https://github.com/sarimabbas/vue-teatree

安装

yarn add vue-teatree # (or use npm)

范例

• 导入组件

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

• Teatree 是将数据传递到的主要组件（如下）。
• NodeType 包含定义每个节点类型的Typescript接口。
• NodeName 是将传递到插槽中（slot）的预制组件。
• NodeToggle 是将传递到插槽中（slot）的预制组件。

准备数据

const data: NodeType[] = [
  {
 name: "parent",
 show: true,
 showChildren: true,
 selected: false,
 children: [
 {
 name: "child",
 show: true,
 showChildren: true,
 selected: false,
 children: [
 {
 name: "grandchild",
 show: true,
 showChildren: true,
 selected: false,
 children: [],
 },
 ],
 },
 ],
 },
];

<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>

Teatree树视图纯粹是数据的功能。如果要更改树视图（例如，切换子代，隐藏节点等），则应修改数据对象。NodeToggle和NodeName可以用自己的组件替换，并分别传递到node-toggle和node-name插槽中。

NodeType

Teatree接受NodeType数组作为其根属性。这意味着可以在树视图中渲染多个根。

interface NodeType {
  // show: 切换此选项将显示/隐藏节点及其子节点
 show: boolean;
 // showChildren: 切换此操作将切换其子级
 showChildren: boolean;
 // selected: 切换此选项将应用“选中的” CSS样式
 selected: boolean;
 // children: 子代还必须符合节点规范
 children: Array<NodeType>;
 // name: 节点名称
 name: string;
 // icon: base64编码的图标（可选）
 icon?: string;
 data?: object;
}

NodeToggle

它是用于渲染节点切换的预构建组件。如果想实现自己的代码，可以看一下源代码！

• 属性

 

NodeName

 

样式

默认导入

@import "~vue-teatree/build/Teatree.css"

Teatree

.teatree {
  cursor: pointer;
  height: 100%;
  overflow: hidden;
}

.teatree-node {
 padding-right: 0.25rem;
}

.teatree-node-item {
 display: flex;
 align-items: center;
 height: 1.5rem;
 background: transparent;

 /* hack to make hover the full width of parent */
 padding-left: 100%;
 margin-left: -100%;
 padding-right: 100%;
 margin-right: -100%;
}

.teatree-node-item:hover {
 background-color: #718096;
}

.teatree-node-item-selected {
 background-color: #718096;
}

.teatree-node-item-name-padded-leaf {
 padding-left: 1.25rem;
}

NodeToggle

.teatree-node-item-icon {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
 color: #cbd5e0;
}

NodeName

.teatree-node-item-name {
  display: inline-block;
  font-size: 0.875rem;
  color: #a0aec0;
 margin-left: 0.5rem;
 user-select: none;

 /* truncate */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.teatree-node-item-name-padded {
 padding-left: 1.5rem;
}

显示右键菜单

可以参考：https://github.com/rawilk/vue-context

export default class MyComponent extends Vue {
 handleNodeRightClick(node: NodeType, event: any) {
 this.$refs.menu.open(event, node);
 }
}

<vue-context ref="menu">
  <template slot-scope="child">
 <your-menu-component :node="child.data" />
 </template>
</vue-context>

使用handleNodeRightClick组件prop调用上下文菜单