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

属性

名称	类型	默认值	描述
data	Tree	-	必填，树型结构，渲染视图的依据
maxLevel	number	-	必填，最大的展开层数。展开超过该值将触发global-fetch事件
rootId	string	-	必填，容器元素的id，用于自适应容器宽度
spaceConfig	Space	{ btnWidth: 12, btnMargin: 18, cardMargin: 10, cardWidth: 170 }	描述按钮、卡片横向尺寸（单位：px）
childFlagKey	string	childFlag	data中是否包含子节点的key
focusId	string	''	v-modal，聚焦节点的id。可使用.item-wrap.focus选中聚焦节点。
frameSide	'center'|'left'|'right'	'center'	视口默认位置，比如置为'left'后，将默认从子序列的最左侧展示。

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

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

插槽

名称	描述
default	data是Tree结构数据，用于获取每个节点的数据

事件

名称	类型	描述
itemFetch	(id: string, index: number, cb: (node: Partial<Tree>) => void) => unknown	用于动态加载节点
globalFetch	(id: string, direction: 'up'|'down') => unknown	用于下钻、上翻，整体更新树

History