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

介绍

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


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


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

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

    • 属性

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

    NodeName

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

    样式

    默认导入

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

    人已赞赏
    技术博文

    简单漂亮的(图床工具)开源图片上传工具——PicGo

    2020-8-16 8:00:10

    技术博文

    基于Kubernetes的开源PaaS平台——kplcloud(开普勒平台)

    2020-8-24 21:28:05

    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索