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

NodeType

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

interface NodeType {  // show: 切换此选项将显示/隐藏节点及其子节点  show: boolean;  // showChildren: 切换此操作将切换其子级  showChildren: boolean;  // selected: 切换此选项将应用“选中的” CSS样式  selected: boolean;  // children: 子代还必须符合节点规范  children: Array;  // 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);  }}

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