🚀 特性

• Vue3 Composition API
• TypeScript
• 同时支持 Vue 2、3
• 虚拟列表

安装

Vue3

$ npm i tj-virtual-components

or

$ yarn add tj-virtual-components

Vue2

$ npm i tj-virtual-components @vue/composition-api

or

$ yarn add tj-virtual-components @vue/composition-api

使用

<script>
  import { VirtualTree } from 'tj-virtual-components';
  import 'tj-virtual-components/lib/style.css';

  export default {
    components: {
      VirtualTree,
    },
  };
</script>

<template>
	<VirtualTree :visible-count="10" :data="nodes" />
</template>

也可以全局引入

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import VirtualComponents from 'tj-virtual-components';
import 'tj-virtual-components/lib/style.css';

new createApp(App).use(VirtualComponents).mount('#app');

注意: 全局使用时组件会增加 TJ 前缀, 也就是

Props

| 属性 | 说明 | 类型 | 默认值 | | -------------------- | ------------------------------------------------------------ | ---------- | ------------- | | data | 虚拟树展示的数据 | TreeNode[] | - | | visibleCount | 必填项，可视区域的元素数量 | number | - | | itemHeight | 元素高度 | number | 30 | | defaultExpandedKeys | 默认展开项的 id 数组 | string[] | [] | | defaultCheckedKeys | 默认选中项的 id 数组 | string[] | [] | | showCheckbox | 是否显示复选框 | boolean | false | | emptyText | 空提示 | string | No Data | | checkStrictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法 | boolean | false | | indent | 相邻级节点间的水平缩进, 单位为像素 | number | 15 | | load | 懒加载回调函数，接受两个参数 (node, resolve), 使用 resolve(data) 返回对应数据, 定义该属性后子节点会进行懒加载，data 将会失效 | Function | - | | prop | 自定义节点属性名 | Prop | 查看下方 Prop | | bufferCount | 虚拟列表缓冲区域节点数量 | number | 3 | | onLoadMore | 加载更多回调函数，接受两个参数 (parentKey, resolve), 使用 resolve(data) 返回对应数据 | Function | - | | onCreateLoadMoreNode | 在创建 loadMoreNode 时会进行调用，如果返回 false 则不会创建 loadMoreNode，无返回值或 true 则会创建 loadMoreNode，使用该钩子函数，你可以自定义 loadMore 的显隐，它会传递一个 node 参数。 | Function | - | | isDrag | 节点是否可拖拽 | boolean | false

注：在懒加载时，Tree 内部无法判断当前节点下是否存在子节点，你需要定义一个 loading 字段，如果该字段为 true 则说明该节点下有子节点，这时可以进行懒加载，如果为 false 则没有展开 icon ，也不会进行懒加载。

Prop

interface Prop {
  value: string;
  label: string;
  children: string;
  loading: string;
}

const prop: Prop = {
  value: 'id',
  label: 'label',
  children: 'children',
  loading: 'loading',
};

Events

| 事件名 | 说明 | 参数 | | ---------------- | ---------------------- | --------------- | | node-expand | 节点展开时触发 | node | | node-collapse | 节点折叠时触发 | node | | check | 复选框被点击的时候触发 | (node, checked) | | node-click | 节点点击时触发 | (node, event) | | node-contextmenu | 节点右击触发 | (node, event) | | node-drop | 拖拽成功完成时触发的事件 | (draggingNode, dragEvent, dropType) |

Methods

| 方法名 | 说明 | 参数 | | ------------------- | ------------------------- | ------------------------------------------------------------ | | setData | 重新设置 Tree 数据 | (node: TreeNode[]) | | insertSiblingNodes | 插入兄弟节点数据 | (referKey: 参照节点 Key, nodes: TreeNode[]) | | insertBefore | 为 Tree 的一个节点的前面增加一个节点 | (referKey: 参照节点 Key, nodes: TreeNode) | | insertAfter | 为 Tree 的一个节点的后面增加一个节点 | (referKey: 参照节点 Key, node: TreeNode) | | appendChildren | 为 Tree 中的一个节点追加一个子节点 | (parentKey: 父节点 Key, node: TreeNode) | | updateNode | 更新节点数据 | (nodeKey: 节点 Key, node: TreeNode, deep?: boolean 是否更新 children 数据) | | updateChildren | 更新节点的 chilren 数据 | (parentKey: 父节点 Key, nodes: TreeNode[]) | | removeNode | 删除指定节点 | (nodeKey: 节点 key) | | removeChildren | 删除指定节点子节点列表 | (nodeKey: 节点 key) | removeNodeChildren | 删除指定节点指定子节点 | (parentKey: 父节点 Key, nodeKey: 节点 key) | | getCheckedKeys | 获取选中节点的 key 数组 | - | | getHalfCheckedKeys | 获取半选中节点的 key 数组 | - | | getExpandedKeys | 获取展开节点的 key 数组 | - | | setExpandedKeys | 设置展开节点 | (Keys: NodeKeys[]) | | setCheckedKeys | 设置选中节点 | (Keys: NodeKeys[]) | | getCheckedNodes | 获取选中节点 | - | | getExpandedNodes | 获取展开节点 | - | | getHalfCheckedNodes | 获取半选中节点 | - | | getNode | 根据 key 拿到 Tree 组件中的 node | (nodeKey: 节点 key)|

Slots

| 插槽 | 说明 | 参数 | | --------- | ---------------------------- | ------------- | | default | 默认插槽, 用于自定义渲染节点 | node 节点信息 | | icon | 自定义节点的 icon 图标 | - | | empty | 自定义空数据展示 | - | | load-more | 自定义 load-more 按钮 | - |