用zTree替代Element UI的Tree，解决大数据卡顿问题

前言

Vue Element UI的Tree组件在加载大量节点时会出现明显的卡顿，电脑配置差点更是难受。即使使用懒加载，即每展开父节点再去加载子节点，若字节点数目同样众多，Tree组件在使用过程中依旧卡顿。这里提供一个jquery的方案，使用zTree替代Element UI的Tree组件，让树组件使用非常流畅。
因为树节点数目众多，使用zTree依旧延续展开父节点再去加载子节点的方式。

显示zTree

zTree：http://www.treejs.cn/v3/main.php#_zTreeInfo。首先是zTree的标签：

<div v-loading="treeLoading" style="height: 400px">
    // zTree
    <ul id="ztree" class="ztree" />
</div>

参照zTree官方文档，配置zTree的setting：

data() {
    return {
        ztree: null,
        setting: {
            simpleData: {
                enable: true
            },
            check: {
                enable: true,
                chkboxType: { Y: 'ps', N: 'ps' }
            },
            view: {
                showIcon: false,
                showLine: false
            },
            callback: {
                beforeExpand: this.beforeExpand,
                onAsyncSuccess: this.onAsyncSuccess,
                onAsyncError: this.onAsyncError,
                onClick: this.zTreeOnClick
            }
        }
    }
},

async mounted() {
    // 在mountd加载根节点
    let nodes = await this.getLSKKTree(0, 'org')
    $.fn.zTree.init($('#ztree'), this.setting, nodes)
    this.ztree = $.fn.zTree.getZTreeObj('treeDemo')
    await this.beforeExpand(null, this.ztree.getNodes()[0])
    this.checkedLastNodes()
},

展开父节点加载对应的子节点：

async beforeExpand(treeId, treeNode) {
    // 根据业务需求判断该节点是不是父节点
    if (treeNode.children.length === 0 && treeNode.type !== 'fec') {
        let result = await this.getLSKKTree(treeNode.id, treeNode.type)
        // 添加子节点到父节点
        this.ztree.addNodes(treeNode, result, true) 
        // 展开父节点，显示新加载的子节点
        this.ztree.expandNode(treeNode, true, false, false) 
        this.checkedChildNode(treeNode.getCheckStatus(), treeNode.children)
    }
    return true
},

接下来设置滚动条。这里用到了vuescroll组件：https://vuescrolljs.yvescoding.org/zh/guide/

<vue-scroll ref="vs" :ops="treeScroll">
    // zTree
    <ul id="ztree" class="ztree" />
</vue-scroll>

data() {
    return  {
        treeScroll: {
            scrollPanel: {
                initialScrollY: true,
                initialScrollX: true,
                scrollingX: true,
                scrollingY: true
            },
            vuescroll: {
                mode: 'native',
                sizeStrategy: 'number',
                detectResize: true
            },
            rail: {
                size: '8px'
            },
            bar: {
                background: '#c9c9c9',
                minSize: false,
                size: '8px',
                disable: false,
                onlyShowBarOnScroll: false
            }
        },
    }
}

因为本来整个项目使用的是Element UI的视觉方案，所以还要适配样式：

zTreeStandard.png

完善功能

自动勾选子节点

父节点的勾选状态有三种：勾选、半选（即只有部分子节点选中）、不勾选。
父节点勾选，则新加载的子节点全部勾选。

// 展开父节点，子节点选中状态跟随父节点
checkedChildNode(status, children) {
    if (status !== null && status.checked && status.half) {
        for (let child of children) {
            this.ztree.checkNode(child, true, true)
        }
    }
},

节点复选

节点复选：有时候我们打开窗口勾选树的节点，然后点击确定关闭窗口。再次打开窗口后，树自动勾选上一次勾选的节点。
复选步骤：每次勾选节点时记录勾选的节点checkArray、以及勾选节点到根节点的所有父节点pathArray。复选时根据pathArray展开该节点的所有父节点，然后再勾选节点。

记录checkArray、pathArray

getCheckedNodes() {
    // 获取勾选和半选节点
    let nodes = this.ztree.getCheckedNodes()
    let pathArray = []
    for (let i = 0; i < nodes.length; i++) {
        let status = nodes[i].getCheckStatus()
        // 只保留勾选节点
        if (status.checked && status.half) {
            nodes.splice(i, 1)
            i--
        }
    }
    for (let node of nodes) {
        let path = []
        path.push(node)
        this.getPath(node, path)
        // 索引值越小，越靠近根节点
        path.sort((a, b) => {
            return a.tId.split('_')[1] - b.tId.split('_')[1]
        })
        pathArray.push(path)
    }
    return {
        checkArray: nodes,
        pathArray: pathArray
    }
},
// 从当前节点到根节点
getPath(node, path) {
    let pNode = node.getParentNode()
    // 根节点，返回 null
    if (pNode !== null) {
        if (path.length === 0 || path.findIndex(item => item.tId === pNode.tId) === -1) {
            let node = {
                name: pNode.name,
                tId: pNode.tId,
                type: pNode.type,
                id: pNode.id
            }
            path.push(node)
            this.getPath(pNode, path)
        }
    }
},

/*
    选中的节点：
    checkArray: [
        {"name":"节点11","id":"1","type":"fec","tId":"treeDemo_619"}
    ]
    选中节点的所有父节点
    pathArray: 
    [
        [
            {"name":"节点0","tId":"treeDemo_1","type":"org","id":"1"},
            {"name":"节点1","tId":"treeDemo_2","type":"org","id":"4"}
        ]
    ]
*/
async checkedLastNodes() {
    if (this.checkArray.length > 0) {
        let pathArray = this.pathArray
        const ztree = this.ztree
        for (let path of pathArray) {
            for (let i in path) {
                var node = ztree.getNodeByTId(path[i].tId)
                // 还没有加载该节点
                if (node === null && i > 0) {
                    // 通过上一级节点加载该节点
                    let result = await this.getLSKKTree(path[i - 1].id, path[i - 1].type)
                    node = ztree.getNodeByTId(path[i - 1].tId)
                    ztree.addNodes(node, result, true)
                    ztree.expandNode(node, true, false, false)
                }
            }
        }
        for (let check of this.checkArray) {
            let node = ztree.getNodeByTId(check.tId)
            // 勾选节点
            ztree.checkNode(node, true, false, false)
        }
        // vuescroll跳转到第一个选中节点的位置
        this.$refs['vs'].scrollIntoView('#' + this.checkArray[0].tId, 200)
    }
},