element-ui树形控件展开指定节点

1,296 阅读1分钟

在开发中,遇到了一个需求,想要动态把某些节点展开,但是element-ui只提供的默认展开属性,并没有提供对应的方法,经过网上搜索查询,加上自己的实践,完成了这个功能 下面上代码

    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
      :default-checked-keys="defaultChecked"
      :props="defaultProps"
      :render-content="renderContent"
    >
    </el-tree>
    <el-button @click="expanded(4231)">点击展开</el-button>
    // node.key 为你想展开节点的(node-key绑定的值)
    // 核心代码:this.$refs.tree.store.nodesMap[node.key].expanded = true
    // 注意点:通过这个方法进行展开,只会展开一个节点,上层节点不会连带着一起展开
    // 如果要把上层节点一起展开,需要用到循环
    expanded(id) {
      let node = this.$refs.tree.getNode(id).parent;
      while (node.key !== 1001) {
        this.$refs.tree.store.nodesMap[node.key].expanded = true;
        node = node.parent;
      }
    },