elementui树状菜单tree_element-ui 树组件(tree)展开合并菜单节点完整功能

element-UI的树组件十分强大,但是我这边有一个需求,点击节点本身和左边小三角按钮时都需要记录菜单树的展开节点。

点击左边小三角不能触发node-click事件(如果有朋友知道怎么做,麻烦告知一下,下面的代码就不需要看了/捂脸)

为了使点击小三角也能追踪记录到节点的开合状态,所以启用了node-expand和node-collapse两个事件

这时我遇到一个让我想原地去世的BUG,就是节点的展开闭合状态node.expanded怎么都不对,具体体现为:node打印出来里面的expanded是正常的,但是如果打印node.expanded就不对!!!!我都要怀疑是浏览器BUG了。

这种状态滞留像极了复杂数据类型值修改后再js中能看见正确的值,而template中渲染还是错误的值一样

所以我尝试分开写node-collapse和node-expand,并用this.$set去设置node.expanded值,之后再去调用记录展开节点数组的方法就OK了!!✿✿ヽ(°▽°)ノ✿✿

template:

class="filter-tree"

:data="treedata"

node-key="id"

:default-expanded-keys="treeopenkey"

@node-expand="unfoldTreeState"

@node-collapse="foldTreeState"

@node-click="node

你可能感兴趣的:(elementui树状菜单tree_element-ui 树组件(tree)展开合并菜单节点完整功能)