vue-virtual-tree
vue-virtual-tree
Based on the tree component encapsulated by vue3 and dedicated to large data volume, if the data volume is not large, using this component is a bit wasteful
English & 简体中文
Docs & Demo
online demo
online demo v4
How to use
npm i vue-virtual-tree
Global registration, but this will lose the type, if you use typescript, this method is not recommended
import { createApp } from 'vue';
import VirTree from 'vue-virtual-tree';
createApp(App).use(VirTree).mount('#app');
In components:
<vir-tree />
Partial registration, you can get a complete type
<template>
<div class="demo">
<vir-tree" :source="list" />
</div>
</template>
<script lang="tsx">
import {defineComponent, onMounted, ref} from 'vue';
import { VirTree, TreeNodeOptions } from 'vue-virtual-tree';
export default defineComponent({
name: 'BaseDemo',
components: { VirTree },
setup(props, {emit}) {
const list = ref<TreeNodeOptions[]>([]);
return {
list
}
}
});
</script>
Dependencies
Dependencies
@types/lodash-es: ^4.17.4@vue/babel-plugin-jsx: ^1.0.3@vue/cli-plugin-babel: ~4.5.0@vue/cli-plugin-typescript: ~4.5.0@vue/cli-service: ~4.5.0@vue/compiler-sfc: ^3.0.0ant-design-vue: ^2.1.2del: ^6.0.0express: ^4.17.1sass: ^1.26.5sass-loader: ^8.0.2style-resources-loader: ^1.4.1ts-import-plugin: ^1.6.7typescript: ~4.1.5vue-cli-plugin-style-resources-loader: ~0.1.5