element tree 卡顿的问题

Question

项目中需要用到 element 的 el-tree 树控件，但是不能使用延迟加载，数据大概 2000 条，没钱非常卡，大家怎么解决呢？

谢谢！

Answer 1

懒加载自定义叶子节点: https://element.eleme.cn/#/zh...

Answer 2

懒加载也可以支持前端搜索.

首先将数据一次性获取到.
实现一个从树中过滤关键字的方法.

newTree = filterTree(treeData, keyword);

将newTree的第一层节点提供给el-tree.
为el-tree提供load方法,该方法从过滤后的树中返回节点的子节点.

搜索数据时,更新树数据,强制el-tree重新渲染(可以v-if一个flag,开关flag即可强制渲染)

<el-tree v-if="freshToken"/>

methods: {
    forceFresh() {
        this.freshToken = false
        this.$nextTick(() => {
            this.freshToken = true
        })
    }
}