el-tree数据量过大存在搜索卡顿等情况的解决方案

Vue项目中优化el-tree搜索性能的方法,

最新推荐文章于 2024-02-06 16:15:46 发布

原创

最新推荐文章于 2024-02-06 16:15:46 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

**背景:**当开开心心的使用el-tree完成了需求，自认为还做得不错，提测过程中测试发现输入搜索的时候组织树搜索很慢
百思不得其解百度发现网上有针对卡顿的解决方案:vue+easy+tree
项目中简单使用:

1:安装
业务中使用
打包成组件后，发布npm，通过

npm install @wchbrad/vue-easy-tree
或

yarn add @wchbrad/vue-easy-tree

2:使用

   //引入
    import VueEasyTree from '@wchbrad/vue-easy-tree'
    // 样式文件，可以根据需要自定义样式或主题
// 注册 components: {
   
   
	            VueEasyTree
	        },

<vue-easy-tree
            class="filter-tree"
            :data="data"
            node-key="deptId"
            :default-expanded-keys="defaultExpandedKeys"
            :default-checked-keys="defaultCheckedKeys"
            :props="defaultProps"
            :highlight-current="true"<