一叶凉夏

小技巧1.template模板中使用对象和函数在vue3中无法使用filter，所以当需要对数据进行处理的时候，可以选择传入一个函数（因为函数是有返回值的） 同样的，对于类似下面的需求 123456789101112131415161718192021222324const examFilters = (item: any) => { switch (item.examFinish) { case 0: return "待考试"; break; case 1: return "未参加"; break; case 2: return "考试中"; break; case 3: return "未通过"; break; case 4: return "通过"; break; case 5: return...

遍历所有key123Object.keys(this.form).forEach((key) => { this.form[key] = this.selection[0][key]; });

大数据量树结构卡死背景考试人员选择中成员在管理员登录的情况下是全部部门可见的，此时成员可能有几万到十几万，因为现有组件是对全部数据一次性渲染成树结构，在大数据量的情况下就会导致页面卡死的情况 可选解决方案方案一：虚拟列表方案 + 重构el-tree 优点： 性能优化： 虚拟列表方案可以有效减小DOM渲染，只渲染可见区域的节点，降低了浏览器的渲染压力，提高了页面的性能。 可定制性： 通过对el-tree的重构，可以更灵活地定制树组件，根据具体需求进行功能增强或修改。 缺点： 工作量较大： 对el-tree进行重构可能需要大量的工作，包括对组件结构的调整、对现有功能的适配、可能的样式调整等，工作量相对较大。 依赖关系： 如果项目中已经大量使用el-tree，重构可能导致对项目其他部分的影响，需要谨慎处理。 方案二：使用vue-giant-tree组件 优点： 专注性能： vue-giant-tree是专门为大数据量树结构设计的组件，其核心目标是提供更好的性能。采用了虚拟滚动等技术，适用于处理大规模数据，减轻前端渲染压力。 易集成：...

上传文件详细设计设计背景 老文件上传为jquery编写的，需要引入jquery文件以及核心js文件 文件上传依赖的库很多年没有更新维护，可能会遇到难以维护的bug 重构基于vue3，使用组件化开发模式，使得代码更加模块化和可维护，避免引入jquery等额外库和依赖 使用TypeScript能够更好地进行代码提示和静态类型检查 增加上传的可定制化能力和可扩展能力 使上传文件模块更加轻量化，保留核心必要逻辑 需求背景 支持多线程进行文件上传，文件上传等候排队 支持分片上传，可通过配置开启关闭 支持文件秒传 定制化文件上传url，以及文件上传完成通知接口url 支持文件上传进度实时回调，文件总进度分进度 支持文件错误重传 支持文件自定义校验 支持上传文件个性化区域定制 兼容旧版文件文件上传服务，可以实现无感替换 整体设计框架外部交互流程 上传文件系统对外主要就是初始化配置以及文件合规校验： 用户token，用于调起上传接口 可接受的文件类型，array类型有几种类型”Image”, “Video”,”Audio”, “PDF”,”Word”, “Excel”,...

海南系统详细设计技术选型vue3+ts+vite+element plus 初始化项目基本需求 动态路由权限验证 按钮权限 接口代理转发 响应请求拦截处理 ui框架处理 侧栏菜单以及面包屑 通用组件封装 技术选型充分发挥了 Vite 的模块化和快速热更新的特性，结合 Vue 3 和 TypeScript 构建了一个基于单文件组件和组合式 API 的前端架构。这种结构允许我们充分利用 Vite 的即时开发体验，并使用 TypeScript 强大的类型检查功能，提高了代码的可维护性和可读性 动态路由设计1234567router├── routes│   ├── index.ts│   ├── notFoundRoute.ts│   └── userInfoRoute.ts├── index.ts└──...

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127<!-- * @Description: 特征使用设置 * @Author: jmguo2 * @Date: 2023-10-12 11:28:59 * @LastEditors: jmguo2 * @LastEditTime: 2023-10-18 10:46:34--><template> <div> <!-- <el-button...

vue源码1. runtime only和 runtime + compiler这俩主要区别就是第一个不支持在.js文件中使用template模板语法比较轻量级，构建的文件大小会更小，运行更快，但是可以识别.vue文件的template，可以使用render函数，第二个可以使用template模板语法 第二种方式也是适用大多数的，也是官方默认推荐的配置 2. vue入口vue入口主要就是通过function的方式去实现一个class，之后为这个类去添加各种属性和方法，扩展配置 3. vue为什么必须要通过new实例化在src/core/instance/index.ts中通过function定义了Vue的类实现 12345678910function Vue(options) { // this instanceof Vue 表示会检测this是否是Vue的实例 // 此时只有通过new Vue才会创建出Vue的实例 // 如果直接使用 Vue(options)，则this会是window，这一步主要就是为了满足 // 必须通过new 实例化Vue if...

更多菜单详细设计 需求背景 目前产品中每个菜单的长度都是固定的，而且当用户浏览器分辨率过低的时候、或者用户菜单配置过多，在低分辨率下会存在菜单展示不全的情况，此时需要通过“更多”菜单，当浏览器可视区域不足以展示目标菜单的话，将其收入“更多”菜单中。 需求分析 首先需要解决的就是获取到窗口的可视区域大小 原有菜单实现是每个菜单的宽度是固定的，如果菜单的字数过多的话，就会出现菜单展示不全的问题，所以菜单长度不能固定，需要设置边距自动撑开 获取到每个菜单的宽度，计算当前窗口容器的可视宽度可以容纳的菜单数量 将放不下的菜单放入“更多”菜单中 各种边界场景（更多菜单的展示判断、下拉菜单用户名机构名过长隐藏）

一、转化对象数组的格式1. 需求：有一个对象数组，需要将该数组转化为后端需要的格式数组： 123456789101112131415161718192021[ { enrollTaskId: 1105, label: '对象1' }, { id: 3, parentId: 1105, label: '对象2' }, { id: 4, parentId: 1105, label: '对象3' }, { id: 66, parentId: 1200, label: '对象4' } ] 转化后的数组： 12345678910[ { enrollTaskId: 1105, channelIds: [3, 4] }, ...

新增报名详细设计 页面结构规划 静态表单项静态表单项分为6部分 报名名称 报名说明 报名类别 报名项目 可选级别 费用类别 其中...