背景

记录一下权限树选择、筛选、回显等复杂需求的处理，可能平常业务中很少遇到这种需求，由于前端接收的树形数据结构层级很深，数据都由前端缓存，点击提交按钮才会调用接口，我觉得这个案例对多层级的树型结构数据处理很有参考性，希望能给遇到类似问题的人一些思路。

首先需求需要满足以下功能：

1. 权限组件弹窗展示，以树型表格展示，要求表格快速渲染；
2. 支持输入子节点名称筛选（筛选数据由接口返回，也就是说每次筛选都会重新调用一次查询接口）；
3. 未提交之前，无论筛选多少次，父、子节点的勾选都要支持勾选的回显；
4. 统计勾选子节点的数量；
5. 未点提交按钮之前缓存数据

开发框架

• NodeJs 18.x
• Vue 3.2.x
• Element Plus
• vxe-table 4.5.x

Demo 在沙盒中运行，使用的是Vite Vue3 模板，表格渲染使用vxe-table 库（很好用）；
Vue 使用 2.x 或 3.x 都可以，vxe-table 选择适合的版本就可以，这个 Demo 主要关注的是数据处理。

实现过程

1. 安装依赖和引入组件

npm install element-plus --save
npm install vxe-table xe-utils --save

2. 项目结构
   
   这是沙盒项目中的代码结构，TreeGird.vue 、TreeTableModal.vue、ConfigModal.vue 为关键组件，

3. 页面介绍
   HomeView.vue
   入口文件，引入TreeTableModal。

TreeTableModal.vue
表格弹窗组件，引入TreeGrid.vue,ConfigModal.vue，表格头部配置、表格数据都是在这个组件完成，列表勾选，子节点筛选也是这里处理。

TreeGrid.vue
树形表格组件，统计叶子节点数量，数据由父组件传入。

ConfigModal.vue
编辑弹窗组件，对应树形组件的配置功能

功能截图

编辑扩展配置截图，并缓存编辑内容

Demo地址

代码可以直接在沙盒里预览、运行

沙盒地址