背景
记录一下权限树选择、筛选、回显等复杂需求的处理,可能平常业务中很少遇到这种需求,由于前端接收的树形数据结构层级很深,数据都由前端缓存,点击提交按钮才会调用接口,我觉得这个案例对多层级的树型结构数据处理很有参考性,希望能给遇到类似问题的人一些思路。
首先需求需要满足以下功能:
- 权限组件弹窗展示,以树型表格展示,要求表格快速渲染;
- 支持输入子节点名称筛选(筛选数据由接口返回,也就是说每次筛选都会重新调用一次查询接口);
- 未提交之前,无论筛选多少次,父、子节点的勾选都要支持勾选的回显;
- 统计勾选子节点的数量;
- 未点提交按钮之前缓存数据
开发框架
- 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 主要关注的是数据处理。
实现过程
- 安装依赖和引入组件
npm install element-plus --save
npm install vxe-table xe-utils --save
-
项目结构
这是沙盒项目中的代码结构,TreeGird.vue 、TreeTableModal.vue、ConfigModal.vue 为关键组件, -
页面介绍
HomeView.vue
入口文件,引入TreeTableModal
。
TreeTableModal.vue
表格弹窗组件,引入TreeGrid.vue
,ConfigModal.vue
,表格头部配置、表格数据都是在这个组件完成,列表勾选,子节点筛选也是这里处理。
TreeGrid.vue
树形表格组件,统计叶子节点数量,数据由父组件传入。
ConfigModal.vue
编辑弹窗组件,对应树形组件的配置功能
功能截图
编辑扩展配置截图,并缓存编辑内容
Demo地址
代码可以直接在沙盒里预览、运行