前言
Vue Element UI的Tree组件在加载大量节点时会出现明显的卡顿，电脑配置差点更是难受。即使使用懒加载，即每展开父节点再去加载子节点，若字节点数目同样众多，Tree组件在使用过程中依旧卡顿。这里提供一个jquery的方案，使用zTree替代Element UI的Tree组件，让树组件使用非常流畅。
因为树节点数目众多，使用zTree依旧延续展开父节点再去加载子节点的方式。
显示zTree
zTree：http://www.treejs.cn/v3/main.php#_zTreeInfo。首先是zTree的标签：
// zTree
参照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/
// zTree
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
}
},
}
}
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)
}
},