vue项目中使用了element-ui的el-tree树节点对数据进行了渲染,奈何数据量太大导致页面卡死或需要3s以上才可渲染出来。为了解决以上问题,查询资料对问题进行了解决,对此进行整理。希望可以帮到你。
vue-easy-tree
选用 vue-easy-tree ,这个组件兼容 element-ui 中 el-tree 的方法,在使用虚拟滚动时,也可继续使用 el-tree 的方法。
安装
npm install @wchbrad/vue-easy-tree
或
yarn add @wchbrad/vue-easy-tree
使用
<template>
<div class="ve-tree" style="height:calc(100vh - 20px)">
<!-- 不使用虚拟滚动时只需去掉height参数即可 -->
<vue-easy-tree
ref="veTree"
node-key="id"
show-checkbox