element el-tree

饿了么组件库树结构

 

 

树代码：

 <el-tree

        ref="myTree"

        :data="treeTable"

        :props="defaultProps"

        node-key="organId"

        highlight-current

        @node-click="handleNodeClick"

      ></el-tree>

 

点击事件：

handleNodeClick(item) {

        /* 给父组件返回一个点击的节点数据 */

        this.$emit('clickTreeNode', item)

      },

 

手动触发高亮节点，需要设置异步操作，不然在服务器取到值时同时设置高亮不显示：

手动触发展开的节点：

setTimeout(() => {

                    // 需要在节点树渲染完成后再触发此方法，异步处理

                    this.$refs.myTree.setCurrentKey(this.treeTable[0].organId)

                    //手动触发展开节点

　　　　　　this.$refs.myTree.store.nodesMap[

                      this.treeTable[0].organId

                    ].expanded = true

                  }, 0)