Tj-virtualized-tree NPM

tj-virtualized-tree

一个用 Vue3 写的虚拟化树形组件, 当数据量大时使用它会比较流畅。

安装

> npm i tj-virtualized-tree

> yarn add tj-virtualized-tree

> pnpm add tj-virtualized-tree

基础用法

<template>
  <TJVirtualizedTree :data="treeData" />
</template>

<script lang="ts" setup>
import TJVirtualizedTree from 'tj-virtualized-tree';

const treeData = [
  {
    id: 'node-1',
    label: 'node-1',
    children: [
      {
        id: 'node-1-1',
        label: 'node-1-1',
      },
    ],
  },
  {
    id: 'node-2',
    label: 'node-2',
    children: [
      {
        id: 'node-2-1',
        label: 'node-2-1',
      },
    ],
  },
  {
    id: 'node-3',
    label: 'node-3',
    children: [
      {
        id: 'node-3-1',
        label: 'node-3-1',
      },
    ],
  },
  {
    id: 'node-4',
    label: 'node-4',
    children: [
      {
        id: 'node-4-1',
        label: 'node-4-1',
      },
    ],
  },
];
</script>

Props

属性	说明	类型	默认值
data	虚拟树展示的数据	TreeData[]	-
visibleCount	可视区域的元素数量	number	-
itemSize	元素高度	number	30
defaultExpandedKeys	默认展开项的 id 数组	string[]	[]
defaultCheckedKeys	默认选中项的 id 数组	string[]	[]
showCheckbox	是否显示复选框	boolean	false
emptyText	空提示	string	No Data
checkStrictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法	boolean	false
indent	相邻级节点间的水平缩进, 单位为像素	number	15
props	配置节点信息	object	{ value: 'id', label: 'label', children: 'children'}
load	懒加载子节点, 回调 resolve 函数, 传递子节点数据, 实现懒加载子节点	(node, resolve) => void	-

当使用懒加载时，需要给数据增加一个 loading 字段, 这个字段为 true 则代表该节点下存在子节点，可以进行懒加载，为 false 代表该节点下没有子节点，这时就不会展示展开 icon，也不会触发懒加载。

TreeData

属性	说明	类型
id	节点唯一标识	string
label	节点标签展示值	string
children	子节点数组	TreeData[]

Events

事件名	说明	参数
node-expand	节点展开时触发	node
node-collapse	节点折叠时触发	node
check	复选框被点击的时候触发	(node, checked)
node-click	节点点击时触发	(node, event)
node-contextmenu	节点右击触发	(node, event)

Methods

方法名	说明	参数
getCheckedKeys	获取选中节点的 id 数组	-
getHalfCheckedKeys	获取半选中节点的 id 数组	-
setData	设置 tree 数据	nodes 新节点数组
setExpandedKeys	设置展开节点	keys 展开节点 id 数组
setCheckedKeys	设置选中节点	keys 选中节点 id 数组
insertSiblingNodes	插入节点	key: 参照节点 id, nodes: 插入节点数组