element UI 使用 el-tree 进行不同条件查询, 缓存不同的 DOM 节点

文章结构概述

• • 功能需求
    • 首次分析框架（未成功实现的逻辑结构）
    • 第二次逻辑设计（建议直接参考此处）
    • 程序代码
    • • 1.html相关代码及属性说明
      • 2.单项选择操作的实现代码

功能需求分析

当用户点击按钮时，系统将弹出窗口展示可供选择的人员列表，其中一级分类为班级，二级分类为班级中的具体人员。此外，系统还支持条件搜索功能，用户输入搜索条件后，界面将展示符合要求的可勾选人员。所有勾选操作均在该弹窗页面内完成。待用户通过多次搜索操作确认所有目标人员后，点击确定按钮，并最终通过提交操作将相关数据传输至后端系统。

第一次的分析思路（失败的逻辑）

在实际操作中，多数人可能会首先想到使用el-tree组件自带的_check-change_或_node-click_事件来获取每次操作后的勾选数据数组。然而，这种方式存在一定的局限性，因为此时只能获取到符合当前筛选条件的节点信息。如果用户在之前勾选过不符合当前条件的数据项，这些信息将无法被获取到。

针对这一问题，我开始思考是否可以通过保存每次搜索条件下的数据，并在搜索状态发生改变时，将此次条件下所有被勾选的人员信息添加至缓存中。但随之而来的新问题是，假设用户上一次勾选了一班的王一一同学并将其存入缓存，而本次搜索条件为所有姓王的