level-tree-vue v0.1.4

level-tree-vue

一个基于Vue3.2+的树组件

• 只能展开同源节点（无法同时展开多个兄弟节点）。
• 支持动态加载
• 自适应容器布局
• 可定制视口默认位置

Install

npm install level-tree-vue --save

Demo

<div id="root">
    <LevelTree
        :data="tree"
        :max-level="4"
        root-id="root"
        @item-fetch="itemFetch"
        @global-fetch="globalFetch"
    >
        <template #default="{data}">
        {{ data.id }}
        </template>
    </LevelTree>
</div>

<script lang="ts" setup>
import {LevelTree, Tree} from 'level-tree-vue';

const tree = ref<Tree>({
    id: '0',
    children: [
        {
            id: '0-0',
            children: [
                {
                    id: '0-0-0',
                    children: [],
                    childFlag: false
                }
            ],
            childFlag: true // 非叶子节点
        },
        {
            id: '0-1',
            children: [],
            childFlag: true // 非叶子节点-动态获取子
        },
        {
            id: '0-2',
            children: [],
            childFlag: false // 叶子节点
        }
    ],
    childFlag: true
});
const itemFetch = (
    id: string, // 展开的节点 id
    index: number, // 展开的节点在兄弟中的索引
    cb: (node: Partial<Tree>) => void // 更新回调
) => {
    // 获取由当前 id 开始的节点树
    // cb(node); // 将子树传入回调
};
const globalFetch = (
    id: string, // 节点id
    direction: 'up'|'down' // 刷新视图的方向：上翻、下钻
) => {
    if (direction === 'up') {
        // 获取当前 id 节点的父节点开始的节点树
    } else {
        // 获取当前 id 节点开始的节点树
    }
    // 赋值 tree ，重新渲染 LevelTree
}
</script>

API

属性

Tree

interface Tree {
  pid?: string;
  id: string;
  children: Tree[];
  childFlag?: boolean;
  [key: string]: unknown;
}

• pid、id、children 以及 childFlagKey配置的 key 为树型结构的必要字段。
• 其他内容可依据卡片展示的内容自行添加。

Space

interface Space {
  btnWidth?: number;
  btnMargin?: number;
  cardWidth?: number;
  cardMargin?: number;
}

• 缺省的配置项将沿用默认值。

插槽

事件

History