tj-virtual-components v1.4.1

🚀 特性

• 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

注：在懒加载时，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

Methods

Slots