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

**背景:**当开开心心的使用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"
            :filter-node-method="filterNode"
            @node-click="handleCheckChange"
            ref="tree"
            height="calc(100vh - 300px)"
            v-loading="loading"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                    {{ node.label }}
                    <span v-show="status == 1">({{ data.includeProblemNum }})</span>
                </span>
                <span v-show="status == 0 && data.deptType != 'S'">({{ data.includeStoreNum }})</span>
            </span>
        </vue-easy-tree>

<style lang="scss" scoped>
    .search {
        margin-bottom: 16px;
    }

    .filter-tree {
        // max-height: 700px;
        // overflow-y: auto;
    }

    /deep/ .el-tree-node:focus > .el-tree-node__content {
        color: #00b887 !important;
        background: #fff;
    }

    // 设置高亮颜色
    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        color: #00b887 !important;
        background: #fff !important;
    }

    /deep/ .el-icon-search {
        color: #262626bd;
        font-size: 14px;
    }
    /deep/ .el-tree-node {
        // margin-bottom: 6px;
    }

    /deep/ .el-tree-node__content {
        height: 30px !important;
        color: #606266 !important;
    }
</style>

拓展:

https://blog.csdn.net/Brad_chao/article/details/121082281?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-1-121082281-blog-122108293.235^v36pc_relevant_yljh&spm=1001.2101.3001.4242.2&utm_relevant_index=2