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调用上下文菜单