el-tree扩展vue-easy-tree虚拟树的使用（解决页面卡顿）

最新推荐文章于 2025-04-23 07:14:48 发布

原创最新推荐文章于 2025-04-23 07:14:48 发布

· 948 阅读

1 ·

版权

文章标签：

#vue.js #前端 #javascript

2024.11.21今天我学习了如何使用vue-easy-tree，在使用el-tree组件的过程中，如果子节点的数据太多会导致页面渲染卡顿，导致点击其他子节点也会出现这种情况，一开始想用懒加载实现，但是懒加载只是防止请求过慢，而进行点击子节点进行请求数据，数据过多还是会导致页面卡顿，后来使用了vue-easy-tree虚拟树组件，生成一个虚拟的固定高度，虚拟滚动只渲染了可视区域的节点，代码如下：

1.安装vue-ease-tree组件

npm install @wchbrad/vue-easy-tree

2.main.js全局引入，也可以引入到指定页面

import VueEasyTree from "@wchbrad/vue-easy-tree";
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
Vue.component('VueEasyTree', VueEasyTree)

3.必须要设置一个固定高度height，其他用法和el-tree一样

            <vue-easy-tree
              style="height: 40vh;overflow-y: auto;"
              show-checkbox
              :data="tree_data"
              :props="props"
              height="calc(40vh)"
              node-key="key"
              @check=""
              :filter-node-method=""
              ref="tree"
            >
            </vue-easy-tree>