- 懒加载基本写法:
<el-tree
ref="GridTree"
node-key="_id"
lazy
highlight-current
:props="defaultProps"
:load="loadNode"
:current-node-key="currentNodeKey"
:expand-on-click-node="false"
:default-expanded-keys="defaultExpand"
@node-click="handleNodeClick"
></el-tree>
async loadNode (node, resolve) {
if (node.level === 0) {
this.refreshNode = node
this.refreshResolve = resolve
let topTreeData = await this.getTopTree()
resolve(topTreeData)
this.$nextTick(() => {
this.currentNodeKey = this.curGridTree._id
this.$refs.GridTree.setCurrentKey(this.curGridTree._id)
this.defaultExpand.push(this.curGridTree._id)
})
} else { //懒加载方法
let parentId = node.data._id
let levelTree = await this.getLevelTree(parentId)
resolve(levelTree)
}
}
- 树的局部刷新:
// 刷新当前节点(使用场景:当前节点的子节点产生更改)
async refreshTreeNode (_id) {
const node = this.$refs.GridTree.getNode(_id)
node.loaded = false
node.loadData(() => {
// this.$refs.GridTree.setCurrentKey(node?.data?.id || 0);
})
},
// 刷新父节点(当前节点做删除或修改操作)
async refreshParentTreeNode (_id, isChangeSelect) {
const node = this.$refs.GridTree.getNode(_id)
// 更改父节点的加载状态
node.parent.loaded = false
// 重新加载数据
node.parent.loadData(() => {
if (!isChangeSelect) {
this.$refs.GridTree.setCurrentKey(_id)
} else {
this.$refs.GridTree.setCurrentKey(node.parent.data._id)
}
})
},
- 指定选中节点:(生效关键是setCurrentKey设置的value,对应的key一定是node-key="_id"对应的key)
this.$nextTick(() => {
this.currentNodeKey = this.curGridTree._id
this.$refs.GridTree.setCurrentKey(this.currentNodeKey)
})
- 自定义树图标展示用法 :render-content="renderContent"
renderContent (h, { node, data, store }) {
let enableTemplate =
<span class="custom-tree-node">
<i class="icon-fi-folder icon_tree"></i>
<span>{data.groupName}</span>
</span>
let disTemplate =
<span class="custom-tree-node" style="cursor:default">
<i class="icon-fi-folder icon_tree dis"></i>
<span>{data.groupName}</span>
</span>
return (
data.level ? enableTemplate : disTemplate
)
},
网友评论