本文介绍了在使用 Element UI 的树组件（Tree）时，如何处理点击节点和小三角图标记录展开状态的需求。作者发现点击小三角不会触发 `node-click` 事件，并遇到了节点展开状态 `expanded` 的滞后问题。通过监听 `node-expand` 和 `node-collapse` 事件，并使用 `this.$set` 深度赋值更新 `expanded` 属性，解决了这个问题。文章提供了相关的 Vue 模板代码和 JavaScript 方法，并希望读者分享更简洁的解决方案。
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="nodeClick" auto-expand-parent="false" :ind
最低0.47元/天 解锁文章
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
