Vue2使用Virtual Tree组件解决大数据量加载慢问题

发表于 | 分类于
Vue2使用Virtual Tree组件解决大数据量加载慢问题

前言

当传统的Tree组件加载数据太多的时候，所有节点都要渲染，就会导致页面十分卡顿。

这里我们可以使用虚拟树，通过只渲染显示的部分来降低渲染的压力。

Virtual Tree

参照element-plus (opens new window)中TreeV2改造vue2.x版本虚拟化树形控件
不论你的数据量多大，虚拟树都能毫无压力地处理。

安装

1
2
3
npm install @sangtian152/virtual-tree--save
# or 
yarn add @sangtian152/virtual-tree

引入

1
2
3
4
5
import Vue from 'vue';
import VlTree from '@sangtian152/virtual-tree';
import "@sangtian152/virtual-tree/lib/vl-tree.css";

Vue.use(VlTree);

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<vl-tree
         ref="zjtree"
         :data="chapter_list"
         :height="1070"
         :item-size="36"
         >
    <template #icon>
        <Icon type="ios-arrow-forward" />
    </template>

    <template scope="{data}">
        <div class="tree_box">
            <span class="tree_item">{{ data.label }}</span>
            <span
                  style="cursor: pointer;"
                  class="tree_item"
                  @click.stop="openDrawer(data, true)"
                  >{{ data.pointname ? data.pointname : "请选择" }}
            </span>
        </div>
    </template>
</vl-tree>

自定义

自定义图标

1
2
3
<template #icon>
    <Icon type="ios-arrow-forward" />
</template>

自定义模板

1
2
3
<template scope="{data}">
    {{ data.label }}
</template>