**背景:**当开开心心的使用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-2defaultbaidujs_baidulandingword~default-1-121082281-blog-122108293.235v36pc_relevant_yljh&spm=1001.2101.3001.4242.2&utm_relevant_index=2