element-ui tree 手动进行展开(异步树也可以)

  • element-ui tree 手动进行展开(异步树也可以)已关闭评论
  • 41 次浏览
  • A+
所属分类:Web前端
摘要

背景项目中用到了vue的element-ui框架,用到了el-tree组件。由于数据量很大,使用了数据懒加载模式,即异步树。异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或者方法可以使用。 经过调试与阅读elment-ui源码才发现有现成的方法可以进行结点展开。下面就介绍结点展开的实现!

背景

项目中用到了vue的element-ui框架,用到了el-tree组件。由于数据量很大,使用了数据懒加载模式,即异步树。异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或者方法可以使用。 经过调试与阅读elment-ui源码才发现有现成的方法可以进行结点展开。下面就介绍结点展开的实现!

1.监听复选框点击事件check

<el-tree         :props="mulprops"         :load="loadNode"         lazy         node-key="id"         show-checkbox         accordion         @current-change="currentChange"         :filter-node-method="filterNode"         @check="handleCheck"         ref="tree"         :default-checked-keys="defaultCheckedNodes"         :default-expanded-keys="defaultExpandedNodes"     >     </el-tree>

2.手动展开,使用node.expand()方法

handleCheck(nodeData,  treeChecked) {       let node = this.$refs.tree.getNode(nodeData.id)       //将选中的未展开的节点进行展开       if(node.checked && !node.expanded){         node.expand(function(){           for(let i=0; i< node.childNodes.length; i++){             node.childNodes[i].expand()           }         })       }     }