美文网首页
el-tree问题总结(setCurrentKey生效问题、懒加

el-tree问题总结(setCurrentKey生效问题、懒加

作者: vonson | 来源:发表于2023-07-19 15:58 被阅读0次
    1. 懒加载基本写法:
    <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)
          }
        }
    
    1. 树的局部刷新:
    // 刷新当前节点(使用场景:当前节点的子节点产生更改)
        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)
            }
          })
        },
    
    1. 指定选中节点:(生效关键是setCurrentKey设置的value,对应的key一定是node-key="_id"对应的key)
    this.$nextTick(() => {
        this.currentNodeKey = this.curGridTree._id
        this.$refs.GridTree.setCurrentKey(this.currentNodeKey)
    })
    
    1. 自定义树图标展示用法 :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
          )
        },
    

    相关文章

      网友评论

          本文标题:el-tree问题总结(setCurrentKey生效问题、懒加

          本文链接:https://www.haomeiwen.com/subject/zhxaudtx.html