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

2023-07-19  本文已影响0人  vonson
  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
      )
    },
上一篇下一篇

猜你喜欢

热点阅读