把可选择的el-tree中选中的节点单独用一个棵树显示解决方案

本文探讨了前端开发中如何应对产品需求变化,作者分享了如何在已有的el-tree组件基础上,通过自定义插槽和计算属性实现右侧选中节点的清晰展示,同时讲述了遇到的挑战和解决方案,包括数据同步、删除操作的联动更新。

有时候我问自己,为什么我干的前端的跟别人干的不一样,人家都是写写h5页面啥的就好了,为什么我非得那么苦逼的魔改各种组件,产品就不能按照现有的组件库设计产品吗?唉,说多了都是泪。不过这个也能让我有一定提升,只是这个提升是时间的极度浪费来达到的,毕竟在已有组件上就行修改还是很难的,总归是受限的。不说了,直接进入正题 吧。先看个截图,一图胜千言!!!

在这里插入图片描述

左边是一个棵完整的树,右边是选中的节点组成的树。我做过很多系统,一般都是用一棵树就搞定了,毕竟左边的树上已经有选中和取消选中的操作了。无奈产品经历非得说在树很大的时候,不太容易看清哪些节点被选中了。说的也有道理,不过我觉得更多的是要维护他的面子,只要开发提的建议一律不听就对了,按照自己的想法做!!无可奈何!!

说一下我的思路吧。

  1. 左右两棵树都用el-tree实现,我可不想自己徒手撸一棵树,我的脑细胞和头发都不允许我这么做
  2. 右边树使用el-tree的插槽来自定义节点的显示
  3. 右边树的数据根据树全量数据和选中节点生成(使用计算属性),选中节点从左边树的check事件中获取
  4. 删除右边树中的节点时,相应的更新左边树,并且把选中节点修正成删除节点后的结果,这样计算属性会重新计算,根本不用我自己从右边树中删除节点

下面就上面的几点给出代码,最后我会给出一个完成demo

右边树使用插槽

<el-tree
          ref="rightTree"
          :props="props"
          :data="computedSelectedTreeData"
          :expand-on-click-node="false"
          node-key="id"
          default-exp
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值